js 微信授权登陆实现(转)

0311lc.com说:

追加:代码实现

完全使用前台实现 代码:点击跳转
完全使用后台实现 代码:点击跳转

前言
为了更好的用户体验,微信登陆已近必不可少!

一、注册
这里不多说了,网址:https://open.weixin.qq.com/ (微信开放平台)
但是我还是要吐槽一下,真的是无语,一会一个微信开放平台,一会一个微信公众平台,两个账号还不能通用,不能通用不能通用把,两个平台的邮箱注册账号还不能一样!真亏我以前注册了2个邮箱账号!

二、主要流程
官方文档:点击我跳转

主要流程
————————————————

2.1 引入样式以及相关js代码

配置显示微信二维码的div

<div id="weixin"></div>

引入js

http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

在需要使用微信登录的地方实例以下JS对象:

var obj = new WxLogin({
id: "weixin",
appid: "你自己申请的小程序会有的",
scope: "snsapi_login",
redirect_uri: "回调地址"    // 扫描二维码就会使用该接口并在该接口后增添参数  ?code=011LSrB80R1abG1k6WD80wk5B80LSnBj&state=undefined
});

例子: 如果redirect_uri: “http;//www.guokangjie.cn/weixinlogin” 则用户在扫描二维码时会跳转路径如下 http://www.guokangjie.cn/weixinlogin?code=011LSrB80R1abG1k6WD80wk5B80LSrBj&state=undefined
其中的code 是非常重要的!!!是下一步的关键

2.2、调用接口

2.2.1、通过code获取access_token和openid (使用刚才的code)

https://api.weixin.qq.com/sns/oauth2/access_token?appid=你自己的APPID&secret=你的AppSecret&code=刚刚获取的code&grant_type=authorization_code

会返回json串如下:

{
    "access_token":"18_louWUfx1BmTXOp5HGBoDu75hDDkXP9xwjPlJtG-nrywW5hf0d4-YWRyUZA47LHZ0DR8SgwDEA2gEuWX2X-v1-w",
    "expires_in":7200,
    "refresh_token":"18_px7yKjfWiikiBzNujc8xNG_EbhgXKjWD4F3iItAKl46Amo7sAlvtkPY3qHCYqKm1762FfJSK-0IeD0hjO0R9Ew",
    "openid":"oypcC1tzpTQM3z8oXWgbrWX4dgqQ",
    "scope":"snsapi_login",
    "unionid":"o6JuL1l80GspPSrdODDaSUIRbwGI"
}

其中的access_token和openid是下一步的关键

2.2.2、通过access_token获取该微信用户信息

调用微信获取用户信息接口(使用sccess_token)

http请求方式: GET https://api.weixin.qq.com/sns/userinfo?access_token=前面你获取的ACCESS_TOKEN&openid=前面你获取的openid

返回用户信息json串

{
    "openid":"oypcC1tzgTQM3z8oXWgbrWX4dgqQ",
    "nickname":"城墙",  //微信昵称
    "sex":1,            //性别
    "language":"zh_CN", //语言
    "city":"Suzhou",    //所在城市
    "province":"Anhui",  //所在省份
    "country":"CN",      //所在国家
    "headimgurl":"http://thirdwx.qlogo.cn/mmopen/vi_32/fhOw1icVrUT15pIvqV4C1eUic1OAXOgWRh9ZJUyiaIA5qLKgVTsGa6V9dS3nup7SCb6accqLHYq9T5TtLqqSOsOWA/132", //微信头像
    "privilege":[   //用户特权信息,json数组,如微信沃卡用户为(chinaunicom)
    ],
    "unionid":"o6JuL1l80GskPSrdODDaSUIRowGI"  //用户统一标识。针对一个微信开放平台帐号下的应用,同一用户的unionid是唯一的。
}

 

3、总结与吐槽
过程如下:
页面生成二维码 ——》用户扫描确认 ——》生成带有code的url ——》使用code获取 access_token和openid ——》使用acess_token和openid获取该微信用户信息 ——》获得用户json串!!

是真的麻烦,直接一个url捎过去,回来一个用户信息不就ok了吗!!哈哈哈!!开个玩笑,毕竟这类东西还是很重要毕竟是用户的个人隐私,安全点比较好!!

大家在测试的时候要注意要快,有过期时间!!!!另外详细的文档官网以给!!

 


发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注