欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Web网站实现Google登录

程序员文章站 2022-03-20 21:09:52
一、打开谷歌控制台:https://console.developers.google.com/apis 二、点击创建凭据,如下图,填写项目地址等 三、创建好客户端ID和秘钥后,填写对应的项目网址和登录页网址 四、修改OAuth同意屏幕网站首页地址和隐私政策网址 五、代码部分如下: ......

一、打开谷歌控制台: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));
            });
    }