Web与技术 · 2021年12月9号 0

WEB网站实现GOOGLE登录

一、打开谷歌控制台:https://console.developers.google.com/apis

二、点击创建凭据,如下图,填写项目地址等

WEB网站实现GOOGLE登录

三、创建好客户端ID和秘钥后,填写对应的项目网址和登录页网址

WEB网站实现GOOGLE登录

四、修改OAuth同意屏幕网站首页地址和隐私政策网址

WEB网站实现GOOGLE登录

五、代码部分如下:

<script src="https://apis.google.com/js/api:client.js"></script>function google_login() {
        var googleUser = {};
            gapi.load('auth2', function(){
                // Retrieve the singleton for the GoogleAuth library and set up the client.
                auth2 = gapi.auth2.init({
                    client_id: '申请得到的客户端ID', //客户端ID
                    cookiepolicy: 'single_host_origin',
                    scope: 'profile' //可以请求除了默认的'profile' and 'email'之外的数据
                });
                attachSignin(document.getElementById('google_button')); //点击google登录的按钮
            });

    }

    function attachSignin(element) {
        auth2.attachClickHandler(element, {},
            function(googleUser) {
                var profile = auth2.currentUser.get().getBasicProfile();
                console.log('ID: ' + profile.getId());
                console.log('Full Name: ' + profile.getName());
                console.log('Given Name: ' + profile.getGivenName());
                console.log('Family Name: ' + profile.getFamilyName());
                console.log('Image URL: ' + profile.getImageUrl());
                console.log('Email: ' + profile.getEmail());
            }, function(error) {
                console.log(JSON.stringify(error, undefined, 2));
            });
    }