用谷歌按钮登录_使用非常简单的设置即可登录Google的按钮

用谷歌按钮登录

vue-google-login (vue-google-login)

Button to login with google with really simple setup.

使用非常简单的设置即可登录Google的按钮。

安装 (Installation)

To use the login and logout buttons there is no installation needed, just import and use.

要使用登录和注销按钮，无需安装，只需导入并使用。

If you want to have access to the auth api then you need add the plugin.

如果您想访问auth api，则需要添加插件。

2.0.1更新 (2.0.1 update)

Added support to Edge (Thanks Magyarb)

增加了对Edge的支持(感谢Magyarb)

Added option to render a sign-in button with google UI (Thanks TheTrueRandom)

添加了使用Google UI呈现登录按钮的选项(感谢TheTrueRandom)

2.0.0更新 (2.0.0 update)

Added support for the full auth api configuration.

添加了对完整auth api配置的支持。

道具 (Props)

// The Google Sign-In params configuration object. Required.
    // https://developers.google.com/identity/sign-in/web/reference#gapiauth2clientconfig    
    params: Object
    // It gets called if the action (login/logout) is successful.
    onSuccess: Function
    // It gets called if the action (login/logout) fails.
    onFailure: Function
    // It determines if the button is for logging in or for logging out.
    // By default is false so you only need to add it for the logout button
    logoutButton: Boolean
    // Optional, if provided will call gapi.signin2.render with the provided params and render a button with google UI
    // https://developers.google.com/identity/sign-in/web/reference#gapisignin2renderid-options
    renderParams: Object

用法 (Usage)

// It can also be imported as { GoogleLogin }
    import GoogleLogin from 'vue-google-login';

    // Button to login
    <GoogleLogin :params="params" :onSuccess="onSuccess" :onFailure="onFailure">Login</GoogleLogin>

// Button to login with google ui rendered using the renderParams object
    // The rendered button can't be use to logout since it is rendered by the google api and will only login
    // If you add the logoutButton param to true it will show a normal button without styles
    <GoogleLogin :params="params" :renderParams="renderParams" :onSuccess="onSuccess" :onFailure="onFailure"></GoogleLogin>

// Button to logout
    <GoogleLogin :params="params" :logoutButton=true>Logout</GoogleLogin>

export default {
        name: 'App',
        data() {
            return {
                // client_id is the only required property but you can add several more params, full list down bellow on the Auth api section
                params: {
                    client_id: "xxxxxx"
                },
                // only needed if you want to render the button with the google ui
                renderParams: {
                    width: 250,
                    height: 50,
                    longtitle: true
                }
            }
        },
        components: {
            GoogleLogin
        }
    }

There is no need to add callbacks to the logout button since the api doesn't return anything, you can do it nonetheless to make sure it worked.

由于api不会返回任何内容，因此无需向退出按钮添加回调，不过您仍然可以执行以确保其正常工作。

When the user successfully signs in, the callback will return an object that contains a lot of information about the user and about the access token granted.

当用户成功登录后，回调将返回一个对象，该对象包含有关用户以及所授予的访问令牌的很多信息。

methods: {
        onSuccess(googleUser) {
            console.log(googleUser);

            // This only gets the user information: id, name, imageUrl and email
            console.log(googleUser.getBasicProfile());
        }
    }

造型按钮 (Styling the buttons)

Even if it is a component you can think about it as a button, you can add classes, inline styles, etc...

即使它是一个组件，您也可以将其视为按钮，也可以添加类，内联样式等。

Without renderParams is a button, with renderParams is a div since google injects the button so take it into account when adding styles to the component.

没有renderParams是一个按钮，而renderParams是一个div，因为google注入了按钮，因此在向组件添加样式时要考虑到它。

身份验证API (Auth api)

This is completely optional. It's just to have access to the Auth api. It is not needed to use the buttons.

这是完全可选的。 只是可以访问Auth api。 不需要使用按钮。

First import the plugin

首先导入插件

import { LoaderPlugin } from 'vue-google-login';

Then add the plugin to the Vue instance with the params, client_id is the only property required but you can add some optional.

然后使用参数将插件添加到Vue实例中，client_id是唯一需要的属性，但是您可以添加一些可选属性。

Vue.use(LoaderPlugin, {
        client_id: CLIENT_ID
    });

Full list of params

完整的参数列表

Then you will have access to the auth api. It comes as a promise because the script doesn't load instantly. This way we avoid having to worry about if the script has loaded yet or not.

然后，您将有权访问auth api。 这是有希望的，因为脚本不会立即加载。 这样，我们就不必担心脚本是否已加载。

Vue.GoogleAuth.then(auth2 => {
        console.log(auth2.isSignedIn.get());
    })

Full auth api methods

完整的身份验证API方法

翻译自: https://vuejsexamples.com/button-to-login-with-google-with-really-simple-setup/

用谷歌按钮登录