移动端H5页面能做微信授权登陆吗?

  前言

  在一次前端项目中,需要在网页端拉起微信,实现微信授权登录,然后把调用微信API,获取到用户信息,返回给后端。

  网页授权分为两种,一种静默授权,一种非静默授权。微信网页授权是通过OAuth2.0机制实现的,在用户授权给公众号后,公众号可以获取到一个网页授权特有的接口调用凭证(网页授权access_token),通过网页授权access_token可以进行授权后接口调用,如获取用户基本信息;

  这篇文章就讲诉一下如何实现微信授权登录。

  网页授权的两种 scope 的区别

  1. 以`snsapi_base`为 scope 发起的网页授权,是用来获取进入页面的用户的 openid 的,并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页(往往是业务页面)

  2. 以`snsapi_userinfo`为 scope 发起的网页授权,是用来获取用户的基本信息的。但这种授权需要用户手动同意,并且由于用户同意过,所以无须关注,就可在授权后获取该用户的基本信息。

  开发指南

  1. 引导用户进入授权页面同意授权,获取code

  2. 通过 code 换取网页授权access_token(与基础支持中的access_token不同)

  3. 如果需要,开发者可以刷新网页授权access_token,避免过期(非必需步骤)

  4. 通过网页授权access_token和 openid 获取用户基本信息(支持 UnionID 机制)

  第一步:用户同意授权,获取code

  scope若为`snsapi_base`:即选择静默授权,调用此微信服务端API接口

  > https://open.weixin.qq.com/connect/oauth2/authorize?appid=appId&redirect_uri=redirect_uri&response_type=code&scope=snsapi_base&state=123#wechat_redirect

  scope若为`snsapi_userinfo`:即选择非静默授权,调用此微信服务端API接口

  > https://open.weixin.qq.com/connect/oauth2/authorize?appid=appId&redirect_uri=redirect_uri&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

  参数说明:参数详情

  第二步:通过 code 换取网页授权access_token

  如果网页授权的作用域为snsapi_base,则本步骤中获取到网页授权access_token的同时,也获取到了openid,snsapi_base式的网页授权流程即到此为止。

  请求方法:

  > 获取 code 后,请求以下链接获取access_token:

  >

  > https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code参数详情

  第三步:拉取用户信息(需 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参数详情

  代码实现:

  前端:

  需要引入jquery插件

  后端接口:

  效果图

  效果图

  可以获取到国家、地区、openid、code、微信昵称、微信头像、性别、语言等等字段。信息图

  总结

  顺便给大家提供一个微信公众号测试平台:[微信公众平台](微信公众平台)

  

  需要在微信公众号后台配置后,才能后台才能调用成功哦~