WeChat 오픈 플랫폼 개발 - 웹 WeChat 스캔 코드 로그인(OAuth2.0)

1. OAuth2.0

OAuth(Open Authorization)는 사용자가 타사 애플리케이션이 웹사이트에 저장된 사용자의 개인 리소스(예: 사진, 비디오, 연락처)에 액세스할 수 있도록 허용하는 개방형 표준입니다. 사용자 목록) 타사 애플리케이션에 사용자 이름과 비밀번호를 제공하지 않고.

사용자가 특정 서비스 제공업체에 저장된 데이터에 액세스하기 위해 사용자 이름과 비밀번호 대신 토큰을 제공할 수 있습니다. 각 토큰은 특정 웹사이트(예: 비디오 편집 웹사이트)가 특정 기간(예: 다음 2시간 이내) 내에 특정 리소스(예: 특정 앨범의 비디오만)에 액세스할 수 있도록 승인합니다. 이러한 방식으로 OAuth를 사용하면 사용자는 액세스 권한이나 데이터의 전체 내용을 공유하지 않고도 제3자 웹사이트가 다른 서비스 제공자에 저장된 정보에 액세스할 수 있도록 승인할 수 있습니다.

2. 목표

여기서는 주로 사용자가 웹 애플리케이션의 QR 코드를 스캔하고 로그인을 인증하여 사용자의 기본 정보를 얻는 과정인 OAuth2.0의 사용을 시뮬레이션합니다. 자세한 인터페이스 관련 정보는 WeChat 오픈 플랫폼에서 확인할 수 있습니다: https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&lang=zh_CN

3. 사전 준비(WeChat 개발자 권한 획득)

주로 웹사이트(웹) 애플리케이션에 대해 이야기하고 있습니다. 웹사이트 애플리케이션 WeChat 로그인은 OAuth2.0 프로토콜 표준을 기반으로 구축된 WeChat OAuth2.0 인증 로그인 시스템입니다. , 위의 계약). WeChat 클라이언트에서 로그인을 승인(사용자 정보 획득)하려면 http://www.cnblogs.com/0201zcr/p/5131602.html

WeChat OAuth2 수행을 참조하세요. 로그인 및 접속 전, WeChat 오픈 플랫폼에 개발자 계정을 등록하고, 승인된 웹사이트 애플리케이션을 갖고, 해당 AppID 및 AppSecret을 획득한 후, WeChat 로그인을 신청하고 검토를 통과한 후 접속 프로세스를 시작할 수 있습니다.

3.1. 개발자 계정 등록

https://open.weixin.qq.com/에서 개발 계정을 신청할 수 있습니다. Tencent의 웹페이지이므로 QQ 계정을 통해 직접 로그인하실 수 있습니다.

3.2. 웹사이트 애플리케이션 검토 제출

로그인한 인터페이스에서 "관리 센터" 선택 - "웹사이트 애플리케이션 -" 웹사이트 애플리케이션 생성

다음 인터페이스가 나타납니다.

내용을 작성한 후에도 신청서의 종이 버전을 스캔하여 제출할 수 있는 페이지가 있습니다( 템플릿을 다운로드하고 작성한 후 스탬프와 서명이 필요함), 콜백 도메인 이름(로그인을 위해 QR 코드를 스캔한 후 이동하는 페이지) 등을 구성합니다.

그런 다음 검토를 위해 제출하면 됩니다. WeChat 검토가 통과되면 필요한 웹 애플리케이션의 appid와 AppSecret을 가져오고 콜백 도메인 이름을 구성할 수 있습니다(이 세 가지는 개발에 필요합니다).

3.3.개발자 자격 인증

WeChat 로그인 인터페이스를 사용할 예정이므로 인증을 받아야만 WeChat의 고급 인터페이스를 사용할 수 있습니다. 미인증은 아래 사진과 같습니다

인증 후 모습은

아직 찾지 못했습니다. 공개 계정과 같은 테스트 계정을 신청하세요. 테스트 계정 신청 방법을 아시는 전문가분들이 계시다면 조언을 해주셨으면 좋겠습니다.

다음으로 웹페이지 WeChat 스캔 코드 로그인 개발을 시작할 수 있습니다.

4. 인증 절차 설명

WeChat OAuth2.0 인증 로그인을 통해 WeChat 사용자는 제3자 애플리케이션 또는 웹사이트에 안전하게 로그인할 수 있습니다. 제3자는 사용자 인터페이스 호출 자격 증명(access_token)을 얻을 수 있습니다. access_token을 통해 WeChat 개방형 플랫폼 인증 관계 인터페이스를 호출할 수 있으며 이를 통해 WeChat 사용자의 기본 개방 정보를 획득하고 사용자가 기본 개방 기능을 실현하도록 돕습니다.

WeChat OAuth2.0 인증 로그인은 현재 Authorization_code 모드를 지원하며, 이는 서버측 애플리케이션 인증에 적합합니다. 이 모드의 전체 프로세스는 다음과 같습니다.

1. 第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据code参数；2. 通过code参数加上AppID和AppSecret等，通过API换取access_token；3. 通过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作。

access_token 타이밍 다이어그램 획득:

5、获取网页的二维码

　　当我们通过微信的认证，获取到了appid和AppSecret，并配置了回调的域名。我们就已经可以获取属于我们网页的二维码了，获取的方式很简单，只需打开一个微信的链接，加上我们的appid和回调域名即可在网页上面打开二维码，用户用微信客户端扫码并授权登录之后即会跳转到我们配置的回调域名下。

注意：

1、这里填写的是域名（是一个字符串），而不是URL，因此请勿加http://等协议头；2、授权回调域名配置规范为全域名，比如需要网页授权的域名为：www.qq.com，配置以后此域名下面的页面http://www.qq.com/music.html 、 //m.sbmmt.com/ 都可以进行OAuth2.0鉴权。但http://pay.qq.com 、 //m.sbmmt.com/ 、 //m.sbmmt.com/无法进行OAuth2.0鉴权

5.1、请求url说明

　　第三方使用网站应用授权登录前请注意已获取相应网页授权作用域（scope=snsapi_login），则可以通过在PC端打开以下链接：

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

 参数说明

 返回说明

 　　用户允许授权后，将会重定向到redirect_uri的网址上，并且带上code和state参数

redirect_uri?code=CODE&state=STATE

 　　若用户禁止授权，则重定向后不会带上code参数，仅会带上state参数

redirect_uri?state=STATE

5.2、事例：

　　一号店的微信二维码链接如下：

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

 　　将其复制到浏览器中打开即可获得一号店的二维码，二维码页面如下：

　　通过使用微信客户端的扫一扫功能，扫描该二维码，即会跳转到上面填写redirect_uri所在的地址上。假如用户同意授权，这里就获得了微信返回的code参数了。

6、获取用户信息

　　假如前面已经获得code。我们可以通过code参数去获取用户openid和access_token,进而获得用户的信息。

6.1、通过code参数获取access_token

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

 参数说明

返回说明

正确的返回：

{ 
"access_token":"ACCESS_TOKEN", 
"expires_in":7200, 
"refresh_token":"REFRESH_TOKEN","openid":"OPENID", 
"scope":"SCOPE","unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"}

错误返回样例：

{"errcode":40029,"errmsg":"invalid code"}

注意：

• code参数的超时时间是5分钟，且每次请求的code参数的值都不一样。

• access_token的超时时间是32分钟。

6.2、通过access_token获取用户的基本信息

获取的前提条件

• access_token有效且为超时；

• 微信用户已授权给第三方应用账号相应接口作用域（scope)【在二维码生成连接那里填写】

对于接口作用域（scope），能调用的接口有以下：

　　使用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

 参数说明

返回说明

正确的Json返回结果：

{ 
"openid":"OPENID","nickname":"NICKNAME","sex":1,"province":"PROVINCE","city":"CITY","country":"COUNTRY","headimgurl": "//m.sbmmt.com/","privilege":["PRIVILEGE1", 
"PRIVILEGE2"],"unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL"}

错误的Json返回示例:

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

7、总结 

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

• 两者都可以通过微信客户端扫码授权的方式，让第三方页面获得微信用户的一些基本信息（昵称、性别、所在地、在微信唯一标示等……）。他们都是通过提供一个链接让用户授权的方式。但网页版需要在页面打开二维码之后授权，而公众号则需要用户先关注了我们的公众号，然后点开公众号里面的链接，确认授权即可。

• 网页扫码登录需要将授权的链接（二维码链接）在网页中打开、而公众号授权登录的链接必须要微信客户端中打开。

• 无论网页扫码登录还是在公众号中授权登录，都是通过授权的方式获得一个code参数，之后通过code参数获取access_token和openid和通过access_token和openid去获取用户的基本信息的请求链接是一样的。

• 在开发公众号授权登录的过程中，我发现了有测试账号的提供，足以满足我们的测试和开发，但在开发网页扫码时，暂时未发现哪里能获取测试账号，我是通过申请获取的。（希望知道哪里有测试账号的请求高手赐教）。

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

微信公众号群发消息：http://www.cnblogs.com/0201zcr/p/5866296.html

更多微信开放平台开发——网页微信扫码登录（OAuth2.0） 相关文章请关注PHP中文网！