WeChat open platform development - web WeChat scan code login (OAuth2.0)

transferred from

http://www.cnblogs.com/0201zcr/p/5133062.html

 

1、OAuth2.0

  OAuth (Open Authorization) is an open standard that allows a user to allow third-party applications to access private resources (such as photos, videos, contact lists) stored by the user on a website without providing a username and password to the third party application.

  Allows users to provide a token instead of a username and password to access their data stored with a specific service provider . Each token authorizes a specific website (eg, a video editing website) to access a specific resource (eg, just a video in a certain album) for a specified period of time (eg, within the next 2 hours). In this way, OAuth allows users to authorize third-party websites to access information they store on another service provider without sharing their access permissions or the entirety of their data.
2. Goals
  We mainly simulate the process of using OAuth2.0 here, the user obtains the basic information of the user by scanning the QR code of our web application and authorizing the login. Detailed interface related information can be viewed on the WeChat open platform: https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&lang=zh_CN
3. Preliminary preparation (obtain WeChat developer permission)
  We are mainly talking about website (Web) applications here. Website application WeChat login is a WeChat OAuth2.0 authorized login system (that is, the above protocol) built on the basis of the OAuth2.0 protocol standard. Authorized login (obtain user information) on the WeChat client can be viewed: http://www.cnblogs.com/0201zcr/p/5131602.html

  Before performing WeChat OAuth2. Before performing WeChat OAuth2.0 authorized login access, register a developer account on the WeChat open platform , have an approved website application, obtain the corresponding AppID and AppSecret , apply for WeChat login and pass the audit After that, the access procedure can be started.

3.1. Register a developer account
  You can  apply for an account developed at https://open.weixin.qq.com/ . Since it is a Tencent website, you can log in directly through your QQ account.
3.2. Submit website application review
  In the logged-in interface, select "Administration Center" - "Website Application -" Create a Website Application
   The following interface will pop up
  After filling in, there is still one page to fill in, submit a scanned copy of the paper version of the application form (the template will be provided, after we download it and fill it out, it needs to be stamped and signed), and configure the callback domain name (it will jump after scanning the code to log in) page), etc.
  After that, you can submit it for review. After the WeChat review is approved, we can obtain the appid and AppSecret of the web application we need, and configure the domain name to be called back (these three are necessary for our development).
3.3. Developer Qualification Certification
  Since we want to use the WeChat login interface here, we also need to apply for authentication to WeChat. Only after authentication can we use those advanced interfaces of WeChat. Uncertified as shown below
   After authentication it looks like this:
    I have not yet found an application for a test account that can be used as a public account. If there is a master who knows how to apply for a test account, I hope to enlighten me.
  Next, we can start our web WeChat scan code login development.
4. Description of the authorization process
  WeChat OAuth2.0 Authorized Login allows WeChat users to securely log in to third-party applications or websites using WeChat IDs. After WeChat users authorize login to third-party applications that have access to WeChat OAuth2.0, the third party can obtain the user's interface call credentials (access_token ), through the access_token, the authorization relationship interface of the WeChat open platform can be called, so as to obtain the basic open information of WeChat users and help users realize the basic open functions.

  WeChat OAuth2.0 authorization login currently supports authorization_code mode, which is suitable for application authorization with server side. The overall process of this mode is:

1. The third party initiates a WeChat authorization login request. After the WeChat user allows the authorization of the third-party application, WeChat will launch the application or redirect to the third-party website with the code parameter of the authorization temporary ticket;
 2. Add the AppID and AppSecret, etc., exchange access_token through API;
 3. Make interface calls through access_token to obtain basic data resources of users or help users to achieve basic operations.

   Get access_token sequence diagram:

 
5. Get the QR code of the webpage
  When we pass WeChat authentication, we get the appid and AppSecret, and configure the callback domain name . We can already get the QR code belonging to our web page. The way to get it is very simple. Just open a WeChat link, add our appid and callback domain name to open the QR code on the web page. After scanning the code and authorizing the login, it will jump to the callback domain name we configured.
Notice:
1. The domain name (which is a string) is filled in here, not the URL, so please do not add protocol headers such as http: // ; 
2. The configuration specification of the authorization callback domain name is the full domain name, for example, the domain name that requires web page authorization is: www .qq.com, after configuration, the pages under this domain name http://www.qq.com/music.html and http://www.qq.com/login.html can perform OAuth2.0 authentication . But http://pay.qq.com , http://music.qq.com , http://qq.com cannot perform OAuth2.0 authentication

5.1, request url description

  Before the third party uses the website application to authorize the login, please note that the corresponding webpage authorization scope (scope=snsapi_login) has been obtained. You can open the following link on the PC side:

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

 

 Parameter description Whether the parameter must be specified
appid Yes Application unique identifier (obtained in the previous authentication web application)
redirects Yes The redirection address needs to be UrlEncode (obtained in the previous authentication web application)
response_type Yes fill in the code
scope Yes Application authorization scope. There are multiple scopes separated by commas (,). Web applications currently only need to fill in snsapi_login.
state no It is used to maintain the state of the request and callback, and after the request is authorized, it is brought back to the third party as it is. This parameter can be used to prevent csrf attacks (cross-site request forgery attacks). It is recommended that third parties bring this parameter. It can be set to a simple random number plus session for verification.
 Back to Instructions
   After the user allows authorization , it will be redirected to the redirect_uri URL with code and state parameters
redirect_uri?code=CODE&state=STATE

   If the user prohibits authorization , the code parameter will not be taken after the redirect , only the state parameter will be taken

redirect_uri?state=STATE

5.2, Case:

  The WeChat QR code link of Yihaodian is as follows:

https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect

   Copy it into the browser and open it to get the QR code of Yihaodian. The QR code page is as follows:

  By using the scan function of the WeChat client, scanning the QR code will jump to the address where the redirect_uri is filled in above. If the user agrees to the authorization , the code parameter returned by WeChat is obtained here .

6. Obtain user information

  If the code has been obtained before. We can obtain the user's openid and access_token through the code parameter, and then obtain the user's information.
6.1. Obtain access_token through the code parameter
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

 Parameter Description

Whether the parameter must be specified
appid Yes The unique identifier of the application, obtained after the application is submitted and approved by the WeChat open platform
secret Yes The application key, AppSecret, is obtained after the application is submitted to the WeChat Open Platform for review and approval.
code Yes Fill in the code parameter obtained in the first step
grant_type Yes 填authorization_code
Back to Instructions

Correct return:

 
{ 
"access_token":"ACCESS_TOKEN", 
"expires_in":7200, 
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID", 
"scope":"SCOPE",
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}
 
参数 说明
access_token 接口调用凭证
expires_in access_token接口调用凭证超时时间,单位(秒)
refresh_token 用户刷新access_token
openid 授权用户唯一标识
scope 用户授权的作用域,使用逗号(,)分隔
 unionid 当且仅当该网站应用已获得该用户的userinfo授权时,才会出现该字段。

错误返回样例:

{"errcode":40029,"errmsg":"invalid code"}
注意
  • code参数的超时时间是5分钟,且每次请求的code参数的值都不一样。
  • access_token的超时时间是32分钟。
6.2、通过access_token获取用户的基本信息
获取的前提条件
  • access_token有效且为超时;
  • 微信用户已授权给第三方应用账号相应接口作用域(scope)【在二维码生成连接那里填写
对于接口作用域(scope),能调用的接口有以下:
授权作用域(scope) 接口 接口说明
snsapi_base /sns/oauth2/access_token 通过code换取access_token、refresh_token和已授权scope
/sns/oauth2/refresh_token 刷新或续期access_token使用
/sns/auth 检查access_token有效性
snsapi_userinfo /sns/userinfo 获取用户个人信息
 
  使用snsapi_base作用域的授权是扫码之后无需用户点击授权,扫码后直接跳转,用户感觉不到授权了,但这种授权方式能获取的数据量有限,这里我们要获取用户的基本信息,我们需要使用snsapi_userinfo授权。使用snsapi_userinfo授权,扫码后出现类似于下面的授权界面
  此接口用于获取用户个人信息。开发者 可通过OpenID来获取用户基本信息。特别需要注意的是, 如果开发者拥有多个移动应用、网站应用和公众帐号,可通过获取用户基本信息中的unionid来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号,用户的unionid是唯一的。换句话说,同一用户,对同一个微信开放平台下的不同应用,unionid是相同的。请注意,在用户修改微信头像后,旧的微信头像URL将会失效,因此开发者应该自己在获取用户信息后,将头像图片保存下来,避免微信头像URL失效后的异常情况。
  
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID

 参数说明

参数 是否必须 说明
access_token 调用凭证(上一个请求中获得)
openid 普通用户的标识,对当前开发者帐号唯一(上一个请求中获得)
       lang   否 国家地区语言版本,zh_CN 简体,zh_TW 繁体,en 英语,默认为zh-CN
返回说明

正确的Json返回结果:

 
{ 
"openid":"OPENID",
"nickname":"NICKNAME",
"sex":1,
"province":"PROVINCE",
"city":"CITY",
"country":"COUNTRY",
"headimgurl": "http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0",
"privilege":[
"PRIVILEGE1", 
"PRIVILEGE2"
],
"unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL"

}
 
参数 说明
openid 普通用户的标识,对当前开发者帐号唯一
nickname 普通用户昵称
sex 普通用户性别,1为男性,2为女性
province 普通用户个人资料填写的省份
city 普通用户个人资料填写的城市
country 国家,如中国为CN
headimgurl 用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空
privilege 用户特权信息,json数组,如微信沃卡用户为(chinaunicom)
unionid 用户统一标识。针对一个微信开放平台帐号下的应用,同一用户的unionid是唯一的。

错误的Json返回示例:

{ 
"errcode":40003,"errmsg":"invalid openid"
}

7、总结 

  最近着手开发了微信网页扫码登录和公众号授权登录收获颇丰,两者的开发很类似。以下是我个人摸索过程中发现的两者的异同:

  • 两者都可以通过微信客户端扫码授权的方式,让第三方页面获得微信用户的一些基本信息(昵称、性别、所在地、在微信唯一标示等……)。他们都是通过提供一个链接让用户授权的方式。但网页版需要在页面打开二维码之后授权,而公众号则需要用户先关注了我们的公众号,然后点开公众号里面的链接,确认授权即可。
  • 网页扫码登录需要将授权的链接(二维码链接)在网页中打开、而公众号授权登录的链接必须要微信客户端中打开。
  • 无论网页扫码登录还是在公众号中授权登录,都是通过授权的方式获得一个code参数,之后通过code参数获取access_token和openid和通过access_token和openid去获取用户的基本信息的请求链接是一样的。
  • 在开发公众号授权登录的过程中,我发现了有测试账号的提供,足以满足我们的测试和开发,但在开发网页扫码时,暂时未发现哪里能获取测试账号,我是通过申请获取的。(希望知道哪里有测试账号的请求高手赐教)。

 公众账号授权登录:http://www.cnblogs.com/0201zcr/p/5131602.html

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=327040828&siteId=291194637