美文网首页
谷歌第三方登录、google+第三方登录

谷歌第三方登录、google+第三方登录

作者: 可乐_加冰_ | 来源:发表于2020-06-24 10:59 被阅读0次

【准备工作】
api库:https://console.developers.google.com/apis/library?

①在google的API库,找到:google+API,【创建项目】


image.png

②创建凭据或选择一个已有的OAuth2.0客户端ID


image.png image.png
【html部分】
 <div class="login-other" >
    <img class="btn2" id="customBtn" style="cursor:pointer;" alt="login-Google" title="Google+" src="../image/G+.png">
</div>

【js部分】
$.getScript("https://apis.google.com/js/api:client.js",function (res) {
        startApp();
    });
    var googleUser = {};
    var startApp = function () {
        gapi.load('auth2', function () {
            auth2 = gapi.auth2.init({
                //726009858027-1fuqkvl234ehdode55mhr90msp9ovuvt.apps.googleusercontent.com
                client_id: '726009858027-1fuqkvl234ehdode55mhr90msp9ovuvt.apps.googleusercontent.com', //客户端ID
                cookiepolicy: 'single_host_origin',
                scope: 'profile' //可以请求除了默认的'profile' and 'email'之外的数据
            });
            attachSignin(document.getElementById('customBtn'));

        });
    };

    function attachSignin(element) {
        auth2.attachClickHandler(element, {},
            function (googleUser) {
                var profile = auth2.currentUser.get().getBasicProfile();
                var userId = profile.getId();
                var FullName = profile.getName();
                var GivenName = profile.getGivenName();
                var FamilyName = profile.getFamilyName();
                var Email = profile.getEmail();
                var ImageURL = profile.getImageUrl();
                var data = {
                    userId: userId,
                    Headpic: ImageURL,
                    FullName: FullName,
                    GivenName: GivenName,
                    FamilyName: FamilyName,
                    Email: Email,
                    loginTye: 'google+'
                };
                if (userId > 0) {
                    $.ajax({
                        url: "index.php?route=account/login/otherLogin",//后台处理逻辑
                        data: {
                            firstname: FamilyName,
                            lastname: GivenName,
                            email: Email,
                            openid: userId,
                            loginType: data.loginTye
                        },
                        type: "post",
                        dataType: 'json',
                        success: function (data) {

                            if (data['redirect']) {
                                location = data['redirect'];
                            }
                        },
                        error: function (error) {
                            //console.log(error);
                        }
                    });
                }
                layer.msg('Login successful, page jump...', {icon: 1});
                //console.log('Successful login for: ' + JSON.stringify(data));

            },
            function (error) {
                console.log(JSON.stringify(error, undefined, 2));
            });
    }

    //注销
    function signOut() {
        var auth2 = gapi.auth2.getAuthInstance();
        auth2.signOut().then(function () {
            alert('用户注销成功');
        });
    }

ps:以前写的,无意间又发现了,贴个文章凑字数

相关文章

  • 谷歌第三方登录、google+第三方登录

    【准备工作】api库:https://console.developers.google.com/apis/lib...

  • 第三方SDK相关

    苹果登录 适用范围:对于专门使用第三方或社交登录服务(如 Facebook、谷歌、 Twitter、Linkedl...

  • 第三方登录

    第三方登录开发模式及auto2.0简介 微博登录第三方登录就是跳转到第三方的登录页面,只能通过第三方,不能自己设置...

  • 手把手教你集成---ShareSDK

    第三方登录 一.第三方登录的定义 第三方登录,就是利用用户在第三方平台上已有的账号来快速完成自己应用的登录流程。这...

  • 友盟第三方平台登录与分享

    友盟第三方登录 一、概述第三方登录主要用于简化用户登录流程,通过用户拥有的微博、QQ、微信等第三方账号进行登录并且...

  • 一稿适配所有iOS设备【二】

    第三方登录模块 这样我们的登录界面大致就完成了。下面还有一个第三方登录模块。首先是“使用第三方账号登录”的标签。这...

  • 前端与客户端对接使用到的调试利器

    vConsole.js vue 第三方谷歌登录和facebook登陆 https://www.npmjs.com/...

  • 第十二天

    第三方登录 social_django集成第三方登录 $ pip install social-auth-app-...

  • 第三方登录

    3.3 第三方登录 第三方登录,国内常用的第三方登录有:qq、微信、微博三个社交平台。国外常见的有Facebook...

  • mac修改host及端口

    业务场景:本地系统的登录环境需要集成第三方登录。方式是跳转到:第三方接口+本地的url,由于第三方登录界面注册的测...

网友评论

      本文标题:谷歌第三方登录、google+第三方登录

      本文链接:https://www.haomeiwen.com/subject/cffrfktx.html