微信网页授权登录实践总结

0.444字数 1328阅读 11518

进行微信公众号内应用开发一年多了,最近不是很忙,就想起整理下自己用的东西。所以今天介绍下微信网页授权登录实现。一呢,帮助以后自己快速回忆;二呢,帮助刚接触的同行。

需求:如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。

准备:开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中,修改授权回调域名

开门见山,直接开始吧。

第一步:用户同意授权,获取code(前端发起)

在确保微信公众账号拥有授权作用域(scope参数)的权限的前提下(服务号获得高级接口后,默认拥有scope参数中的snsapi_base和snsapi_userinfo),引导关注者打开如下页面

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 

若提示“该链接无法访问”,请检查参数是否填写错误,是否拥有scope参数对应的授权作用域权限。

参数说明:

参考链接(请在微信客户端中打开此链接体验):

scope为snsapi_base(不需要用户授权)

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect

scope为snsapi_userinfo(需要用户授权)

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

用户同意授权后

如果用户同意授权,页面将跳转至 redirect_uri/?code=CODE&state=STATE。

code说明 : code作为换取access_token的票据,每次用户授权带上的code将不一样,code只能使用一次,5分钟未被使用自动过期。

第二步:通过code换取网页授权access_token(后端)

请求方法:

获取code后,请求以下链接获取access_token:  https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

参数说明:

我们看到链接中带有公众号的secret参数,以及获取到的access_token安全级别都非常高,必须只保存在服务器,不允许传给客户端。后续刷新access_token、通过access_token获取用户信息等步骤,也必须从服务器发起。、

返回说明

正确时返回的JSON数据包如下:

{ "access_token":"ACCESS_TOKEN",

"expires_in":7200,

"refresh_token":"REFRESH_TOKEN",

"openid":"OPENID",

"scope":"SCOPE" }

第三步:刷新access_token(如果需要,后端)

由于access_token拥有较短的有效期,当access_token超时后,可以使用refresh_token进行刷新,refresh_token有效期为30天,当refresh_token失效之后,需要用户重新授权。

请求方法:

获取第二步的refresh_token后,请求以下链接获取access_token:

https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

返回说明

正确是返回的JSON数据包如下:

{ "access_token":"ACCESS_TOKEN",

"expires_in":7200,

"refresh_token":"REFRESH_TOKEN",

"openid":"OPENID",

"scope":"SCOPE" }

第四步:拉取用户信息(需scope为snsapi_userinfo,后端)

如果网页授权作用域为snsapi_userinfo,则此时开发者可以通过access_token和openid拉取用户信息了。

请求方法

http:GET(请使用https协议) https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

参数说明

返回说明

正确时返回的JSON数据包如下:

{    "openid":" OPENID",

" nickname": NICKNAME,

"sex":"1",

"province":"PROVINCE"

"city":"CITY",

"country":"COUNTRY",

"headimgurl":    "http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ

4eMsv84eavHiaiceqxibJxCfHe/46",

"privilege":[ "PRIVILEGE1" "PRIVILEGE2"     ],

"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"

}

上面的步骤是我从微信开发文档copy过来的。不一样的是我要总结下我们的前后端实现的大体步骤。第一步是前端发起,由于安全需要和数据存储二、三、四步都由后端实施:

1、前端打开   https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect  链接(具体参数赋值看上面),微信会返回code参数,并跳转redirect_uri的链接,code作为url参数。

2、前端把这个code作为数据调用后端登录接口,后端拿到code,加上appid和secret参数 请求  https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code  来获取access_token,同时拿到openid。

3.后端会先判断数据库里有没有该openid,如果有的话,后端将数据(用户信息)返回到前端;如果没有,则请求  https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code  获取用户信息,返回给前端并存在数据库里。

微信网页授权文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

推荐阅读更多精彩内容