第三方登录

r囧r小猫 2022-05-30 08:46 322阅读 0赞

转自：http://www.cnblogs.com/v-weiwang/p/5732423.html

微信、QQ、微博等第三方登录都是基于OAuth2.0原则

申请开发者账号之内的就不累赘了，网上一大堆：

说下需求，一个网页要在三类容器运行，公司app，微信自动登录，浏览器。

![802779-20161011222713453-989228801.png][]

假设是已经申请完成各平台开发者账号。

先来简单的，微博和QQ

微博：

引入微博JS

appkey中，填入你的微博开发者id(替换\*\*\*\*)

<table style="width:981px;border-spacing:0px;border:1px solid #C0C0C0;margin:0px;padding:0px;float:none;height:auto;line-height:1.1em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;min-height:auto;background:none;"> 
 <tbody style="margin:0px;padding:0px;float:none;height:auto;line-height:1.1em;vertical-align:baseline;width:auto;min-height:auto;background:none;"> 
  <tr style="border-top:0px;background:none;margin:0px;padding:0px;float:none;height:auto;line-height:1.1em;vertical-align:baseline;width:auto;min-height:auto;"> 
   <td style="border-color:#C0C0C0;padding:3px;border-collapse:collapse;color:rgb(175,175,175);line-height:1.1em;margin:0px;float:none;height:auto;vertical-align:baseline;width:35px;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;background:none;"> 
    <div style="margin:0px;padding:0px .5em;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);float:none;height:auto;line-height:1.8em;text-align:right;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;background:rgb(244,244,244) none;">
      1 
    </div></td> 
   <td style="border-color:#C0C0C0;padding:3px;border-collapse:collapse;line-height:1.1em;margin:0px;float:none;height:auto;vertical-align:baseline;width:auto;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;background:none;"> 
    <div style="margin:0px;padding:0px;width:auto;border:0px;float:none;height:auto;line-height:1.1em;vertical-align:baseline;min-height:auto;background:none;"> 
     <div style="margin:0px;padding:0px 1em;border:0px;float:none;height:auto;line-height:1.8em;vertical-align:baseline;width:auto;min-height:auto;white-space:nowrap;background:rgb(244,244,244) none;"> 
      <code style="font-size:14px;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;line-height:1.8em;background:none;margin:0px;padding:0px;border:0px;float:none;height:auto;vertical-align:baseline;width:auto;min-height:auto;">&lt;</code> 
      <code style="font-size:14px;background:none;color:rgb(0,0,255);padding:0px;margin:0px;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;line-height:1.8em;border:0px;float:none;height:auto;vertical-align:baseline;width:auto;min-height:auto;">span</code>&nbsp; 
      <code style="font-size:14px;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;line-height:1.8em;background:none;margin:0px;padding:0px;border:0px;float:none;height:auto;vertical-align:baseline;width:auto;min-height:auto;">id="wb_connect_btn"&gt;微博登录按钮&lt;/</code> 
      <code style="font-size:14px;background:none;color:rgb(0,0,255);padding:0px;margin:0px;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;line-height:1.8em;border:0px;float:none;height:auto;vertical-align:baseline;width:auto;min-height:auto;">span</code> 
      <code style="font-size:14px;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;line-height:1.8em;background:none;margin:0px;padding:0px;border:0px;float:none;height:auto;vertical-align:baseline;width:auto;min-height:auto;">&gt;</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

在你的页面微博登录按钮标签上，加入以上id。页面加载时，微博会自动加载样式，你也可以自己强行修改。

![复制代码][copycode.gif]

![复制代码][copycode.gif]

将以上标签全部加入html中。

至此，只要在页面中登录之后，就能在控制台看到返回数据。当然，测试要在微博注册的域下。

QQ登录：

和微博一样，引入JavaScript文件

微博类似，替换为你的appid

登录标签中加入id标识

然后JavaScript中加入以下代码：

![复制代码][copycode.gif]

QC.Login({
                        //btnId：插入按钮的节点id，必选
                        btnId:"qqLoginBtn",
                        //用户需要确认的scope授权项，可选，默认all
                        scope:"all",
                        //按钮尺寸，可用值[A_XL| A_L| A_M| A_S|  B_M| B_S| C_S]，可选，默认B_S
                        size: "B_S"
                    }, function(reqData, opts){
       //登录成功
                        //根据返回数据，更换按钮显示状态方法
                        console.log(reqData);//查看返回数据
                        QC.Login.getMe(function(openId, accessToken){//获取用户的openId
                            console.log('QQOPENID:'+openId);
                            thirdparty(null,null,reqData.figureurl_qq_2,reqData.nickname,1,openId);
                            QC.Login.signOut();//退出QQ登录调用事件
                        });
                    }
                );

![复制代码][copycode.gif]

测试要在QQ中注册的域名下。重要的事情，再说一遍。

QQ和微博登录，大致相同，只要引入JS文件，然后直接调用方法即可，QQ比微博更和谐，直接提供退出事件。上面代码中有。。

现在来说最蛋疼的微信登录。

微信登录提供两种方法：

第一种，扫码登录：

需要在微信开发者平台中，注册获取appId。

微信登录按钮：

在你微信登录按钮上，添加点击事件，执行以下代码：

$('.weixin-login').on('click',function(){
                window.location.href='https://open.weixin.qq.com/connect/qrconnect?' +
                    'appid=*******&redirect_uri=http%3a%2f%2fwww.xxxxxx.com%2f'+window.location.pathname.substr(1)+'&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect';
            });

需要替换：

![802779-20161011222931875-1145390638.png][]

redirect\_url:要想传当前url，直接encodeURIComponent(window.location.href) //当然，需要你自己进行拼接，不懂的留言

至此，当用户点击之后，跳转至扫码界面：

![802779-20161011223228406-486921276.png][]

![802779-20161011223615125-2074577399.png][]

例如：[https://passport.yhd.com/wechat/callback.do?code=CODE&state=3d6be0a4035d839573b04816624a415e][https_passport.yhd.com_wechat_callback.do_code_CODE_state_3d6be0a4035d839573b04816624a415e]

至此，拿到第一步令牌，code。在你的回调页面中，你要获取url中的code去和微信换取下一步的令牌。因为换取下一步的令牌需要涉及到跨域请求，但是微信不让跨域请求，只能在后台进行后续事项。

第二步，后台请求：https://api.weixin.qq.com/sns/oauth2/access\_token?appid=\[APPID\]&secret=\[SECRET\]&code=\[CODE\]&grant\_type=authorization\_code

替换中括号中的数据。（我走的get请求）。

![802779-20161011225103062-1798020810.png][]

返回以下数据：

![复制代码][copycode.gif]

{ 
    "access_token":"ACCESS_TOKEN", 
    "expires_in":7200, 
    "refresh_token":"REFRESH_TOKEN",
    "openid":"OPENID", 
    "scope":"SCOPE",
    "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
    }

![复制代码][copycode.gif]

最后一步就不说了：

https://api.weixin.qq.com/sns/userinfo?access\_token=\[ACCESS\_TOKEN\]&openid=\[OPENID\]

替换成上次请求获取到的数据，再请求一次，获奖用户基本信息。

微信授权登录。和其它授权类似，需要去官方渠道注册开发者账号，微信授权登录需要到微信公众平台申请.

假设获取到了公众平台appid。

和扫码类似，进入微信指定的一个链接。

但是授权登录是先直接访问微信指定的页面。（扫码是从自己页面跳转到指定微信链接，再回调自己页面。授权是直接从指定的链接地址跳转回自己指定页面）

先上代码：

var param=location.href.split("?")[1];
    //wechat
    var url=encodeURIComponent("http://h5.laikanxing.com/h5-crowd/html/wechat.html?"+param);
        window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxadc302736fea5abf&redirect_uri="+
            url+"&response_type=code&scope=snsapi_userinfo&"+param+"#wechat_redirect";

param：需要带回的参数。

url：回调页面。（公众平台注册的域）

以上步骤可以从前台跳转，可以从后端进行转发。看个人业务需求。

当用户确认授权登录以后，微信从定向到指定回调页面，并且url后拼接了换取用户信息的code。

拿到code以后，和网页扫码登录一样，进行几步交换（必须后台进行）。

后台Java代码：

![复制代码][copycode.gif]

/**
         * activity
         *
         * @param user
         * @return
         */
        @RequestMapping(value = "/get/h5/wechat/{code}", method = RequestMethod.GET, produces = "application/json")
        @ResponseBody
        public LoginResultJSON getWechatUserInfo(@PathVariable("code") String code) {
            String url="https://api.weixin.qq.com/sns/oauth2/access_token?appid=wxadc302736fea5abcf&secret=11241d710a5726a57e6ebd2dfd98b0bf&code="+code+"&grant_type=authorization_code";
            String result=RequestUtil.get(url);
            JSONObject jsonObject=new JSONObject(result);
            String access_token=jsonObject.getString("access_token");
            String openid=jsonObject.getString("openid");
            url="https://api.weixin.qq.com/sns/userinfo?access_token="+access_token+"&openid="+openid;
            result=RequestUtil.get(url);
            jsonObject=new JSONObject(result);
            ThirdPartyUserLoginInfoJSON json=new ThirdPartyUserLoginInfoJSON();
            json.setDeviceId(null);
            json.setDeviceSystem(null);
            json.setHeadUrl(jsonObject.getString("headimgurl"));
            json.setNickname(jsonObject.getString("nickname"));
            json.setSourceType(2);
            json.setUniqId(jsonObject.getString("openid"));
            return userService.thirdPartyLogin(json);
        }

![复制代码][copycode.gif]

[802779-20161011222713453-989228801.png]: /images/20220530/908bc773392b4bdd98c40acf9a0964f5.png
[copycode.gif]: /images/20220530/7f559a2c070244c7a506f68963102294.png
[802779-20161011222931875-1145390638.png]: /images/20220530/69d7a5bd987e4f8ea2c22a7ea8ce6569.png
[802779-20161011223228406-486921276.png]: /images/20220530/a24a250dc6574f84affd360b0ab89fb5.png
[802779-20161011223615125-2074577399.png]: /images/20220530/61a67bfeeea0415b9eda978264dc00b9.png
[https_passport.yhd.com_wechat_callback.do_code_CODE_state_3d6be0a4035d839573b04816624a415e]: https://passport.yhd.com/wechat/callback.do?code=CODE&state=3d6be0a4035d839573b04816624a415e
[802779-20161011225103062-1798020810.png]: /images/20220530/d518eee5537c4f57a6c0d73747e3ffdb.png