当前位置:统一通信/协作企业动态 → 正文

浅析微信内Web App自动登录

责任编辑:editor005 |来源:企业网D1Net  2015-08-28 14:20:13 本文摘自:贝叶书

QQ截图20150824145321.jpg

最初是在Tower.im的公众号里见到了WebApp自动登录,想做一个同样效果的。那时候对公众号开发不熟悉,问了一些人也说的稀里糊涂的,文档又乱,最后花了好长时间才实现。这个功能需要的接口是「网页授权获取用户基本信息」,需要认证企业号才能使用。如果没有权限的话可以试一下微信之门,我也只是知道这个东西,从来没试过。

基本的思路是通过公众号OAuth API获取用户微信的openid。第一次使用的时候让用户登录,然后在数据库里把openid和自己应用的userid对应起来。以后获得用户的openid之后就可以自动登录到对应的用户上。

我的Web App是用AngularJS实现的SPA,登录之后获取一个token放在localStorage,给后端发请求的时候,把token写在Header的Authorization里。

这个过程中不需要使用Cookie,但是为了减少跳转次数,还是用了Cookie。我把和微信登录相关的功能写在了几个PHP单页里,用一个redirect.php做入口,把要跳转的页面放在参数里,由redirect.php检查用户是否已经获得了token,在获取到token之后跳转到目标页面。

登录流程图如下:

1952533049.jpg

  其中和微信有关的操作就是第二行和第三行。

微信的OAuth认证方式是,让用户在微信客户端里打开这样一个地址https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect,微信认证服务器会引导用户跳转到你指定的REDIRECT_URI,并且在该URL后面加上一个CODE参数。

例如,想在http://example.com/redirect.php?type=post页面获得用户的信息,就在页面内使用isset($_GET['code'])判断是否存在code参数。

如果不存在,就让用户访问https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=http%3a%2f%2fexample.com%2fredirect.php%3ftype%3dpost&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect。(注意把url作为参数时要经过UrlEncode)

微信服务器会把用户重定向到http://example.com/redirect.php?type=post&code=CODE。开发者就可以从url参数中获得CODE了。

然后开发者就可以拿着这个CODE,去https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code换取用户的openid。

拿到openid之后就可以判断用户是否绑定过,并进行下一步操作了。

如果需要用户的昵称、头像等更多信息,需要将第一个url中的scope参数改为snsapi_userinfo,详细信息可以看微信的开发文档。

关键字:自动登录Authorization

本文摘自:贝叶书

x 浅析微信内Web App自动登录 扫一扫
分享本文到朋友圈
当前位置:统一通信/协作企业动态 → 正文

浅析微信内Web App自动登录

责任编辑:editor005 |来源:企业网D1Net  2015-08-28 14:20:13 本文摘自:贝叶书

QQ截图20150824145321.jpg

最初是在Tower.im的公众号里见到了WebApp自动登录,想做一个同样效果的。那时候对公众号开发不熟悉,问了一些人也说的稀里糊涂的,文档又乱,最后花了好长时间才实现。这个功能需要的接口是「网页授权获取用户基本信息」,需要认证企业号才能使用。如果没有权限的话可以试一下微信之门,我也只是知道这个东西,从来没试过。

基本的思路是通过公众号OAuth API获取用户微信的openid。第一次使用的时候让用户登录,然后在数据库里把openid和自己应用的userid对应起来。以后获得用户的openid之后就可以自动登录到对应的用户上。

我的Web App是用AngularJS实现的SPA,登录之后获取一个token放在localStorage,给后端发请求的时候,把token写在Header的Authorization里。

这个过程中不需要使用Cookie,但是为了减少跳转次数,还是用了Cookie。我把和微信登录相关的功能写在了几个PHP单页里,用一个redirect.php做入口,把要跳转的页面放在参数里,由redirect.php检查用户是否已经获得了token,在获取到token之后跳转到目标页面。

登录流程图如下:

1952533049.jpg

  其中和微信有关的操作就是第二行和第三行。

微信的OAuth认证方式是,让用户在微信客户端里打开这样一个地址https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect,微信认证服务器会引导用户跳转到你指定的REDIRECT_URI,并且在该URL后面加上一个CODE参数。

例如,想在http://example.com/redirect.php?type=post页面获得用户的信息,就在页面内使用isset($_GET['code'])判断是否存在code参数。

如果不存在,就让用户访问https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=http%3a%2f%2fexample.com%2fredirect.php%3ftype%3dpost&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect。(注意把url作为参数时要经过UrlEncode)

微信服务器会把用户重定向到http://example.com/redirect.php?type=post&code=CODE。开发者就可以从url参数中获得CODE了。

然后开发者就可以拿着这个CODE,去https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code换取用户的openid。

拿到openid之后就可以判断用户是否绑定过,并进行下一步操作了。

如果需要用户的昵称、头像等更多信息,需要将第一个url中的scope参数改为snsapi_userinfo,详细信息可以看微信的开发文档。

关键字:自动登录Authorization

本文摘自:贝叶书

电子周刊
回到顶部

关于我们联系我们版权声明隐私条款广告服务友情链接投稿中心招贤纳士

企业网版权所有 ©2010-2024 京ICP备09108050号-6 京公网安备 11010502049343号

^