微信网页授权——获取code、access_token、openid,及跨域问题解决

首先在微信开发文档中有提到微信网页授权的操作步骤:

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

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

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

其中scope有静默授权和非静默授权两种,在这里我们使用非静默授权:scope等于snsapi_userinfo,为后面获取用户信息做准备。

如果用户同意授权,页面将跳转至 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

但是在获取access_token的过程中,我们会遇到一个跨域问题,什么post、get和jsonp方法都试过了,都不行,那么怎么解决这个跨域问题呢?

首先我们知道我们是不可能改变微信的代码,那么我们就只能想到的解决方法是利用别人的代理来进行中转,那么从网上找到了如下方法:

qu(){
  console.log("aaa")
  let _this = this
  let URL = _this.url + "?appid=" + api.appId + "&secret=" + api.appSecret + "&code=" + _this.code + "&grant_type=" + _this.authorization_code
  $.ajax({
     url:'http://query.yahooapis.com/v1/public/yql',
     dataType:'jsonp',
     data:{
         q:"select*from json where url=\'" + URL + "'",
         format:'json'
     },
     success:function(data){
        console.log(data)
        _this.access_token = data.query.results.json.access_token
        _this.openid = data.query.results.json.openid
     }
  })
}

以上的用的就是yahoo的代理ypl进行一个中转,ypl是雅虎旗下一个用来转换数据的,从而获取到了access_token和openid。

<think>好的,我现在需要帮助用户在移动端网页中集成微信OAuth2授权登录流程。首先,我得理解用户的需求是什么。用户提到他们有一个手机网页,想要通过微信授权登录,所以需要了解整个OAuth2的流程以及如何在移动端实现。 根据提供的引用内容,特别是引用[4]中的代码示例,用户可能已经有一些前端框架(比如Vue)的基础,但需要具体的步骤指导。我需要结合微信的官方文档和提供的示例,梳理出一个清晰的步骤流程。 首先,微信的OAuth2授权登录流程大致是怎样的呢?通常,OAuth2流程包括几个步骤:重定向到微信授权页面,用户同意授权后返回code,然后用code换取access_token,最后获取用户信息。不过具体到微信的实现,可能会有一些细节需要注意,比如参数的传递方式、回调地址的处理等。 接下来,查看用户提供的引用内容。引用[1]提到微信小程序中的OAuth登录,但用户现在需要的是手机网页授权登录,这可能属于微信开放平台的网页授权范畴。引用[4]中的代码示例展示了一个Vue移动端应用中通过重定向到微信授权URL,这应该适用于网页授权流程。 现在需要确定具体的步骤: 1. **注册应用并获取AppID和AppSecret**:用户需要在微信开放平台注册应用,获得AppID和AppSecret,这是必要的前提条件。这一步可能需要在微信开放平台完成,并设置授权回调名,确保安全。 2. **前端发起授权请求**:用户点击登录按钮时,前端需要构造微信授权URL,并重定向到该URL。这里需要包括appid、redirect_uri(编码后的回调地址)、response_type为code,scope参数(snsapi_userinfo或snsapi_base),以及state参数用于防CSRF攻击。引用[4]中的代码示例正是这样做的,所以需要指导用户如何正确构造这个URL。 3. **处理微信回调获取code**:用户授权后,微信会将用户重定向到指定的redirect_uri,并附带code和state参数。前端需要从URL中提取code,然后发送到后端服务器。这里需要注意的是,code的有效期很短,需尽快处理。 4. **后端用code换取access_token**:后端收到code后,需要向微信的接口发送请求,使用code、appid和appsecret换取access_tokenopenid。这一步必须在后端完成,因为涉及敏感信息AppSecret,不能暴露在前端。 5. **获取用户信息**:拿到access_tokenopenid后,后端可以再次请求微信接口获取用户的基本信息,比如昵称、头像等,然后返回给前端,完成登录流程。 还需要注意回调地址的设置必须与微信开放平台中配置的一致,否则会报错。另外,移动端网页可能需要处理问题,或者确保redirect_uri是有效的且能够正确解析参数。 用户提供的引用[2]和[3]可能涉及不同平台(如uni-app)的实现,但用户的问题是关于移动端网页的,所以可能需要专注于标准的OAuth2流程,而不是特定框架的集成步骤。 另外,关于安全性,state参数的使用很重要,防止CSRF攻击。每次生成一个随机的state,并在回调时验证其有效性。 总结步骤后,可能需要分步详细说明,并给出代码示例,特别是前端如何构造URL,后端如何处理code的部分。同时提醒用户注意事项,如名配置、HTTPS要求等。 现在检查是否有遗漏的步骤或可能的错误点。例如,微信网页授权可能需要不同的scope,snsapi_base只能获取openid,而snsapi_userinfo可以获取用户信息,需要根据需求选择合适的scope。此外,redirect_uri必须进行URL编码,否则可能导致错误。 最后,确保提供的代码示例正确,并符合微信的接口要求。例如,引用[4]中的示例URL是否正确构造了参数,是否有遗漏的参数,或者是否需要添加其他参数如#wechat_redirect等。 可能还需要提到,在移动端网页中,如何处理微信内置浏览器的兼容性,或者是否需要使用微信JS-SDK等,但根据OAuth2的标准流程,可能不需要,除非有特殊需求。 综上所述,整理出清晰的步骤,并参考用户提供的引用内容,给出具体的实现方法和代码示例,同时强调安全性和配置注意事项。</think>### 移动端网页集成微信OAuth2授权登录流程分步指南 #### 一、准备工作 1. **注册微信开放平台账号并创建网站应用** 在[微信开放平台](https://open.weixin.qq.com)注册账号,创建网站应用后获取`AppID`和`AppSecret`[^1]。 2. **配置授权回调名** 在应用设置中填写授权回调名(如`https://yourdomain.com`),需与后续`redirect_uri`的名一致[^3]。 --- #### 二、前端实现授权跳转 1. **构造授权URL** 用户点击登录按钮时,前端通过重定向跳转到微信授权页。示例代码(Vue环境): ```javascript const appid = '你的AppID'; const redirect_uri = encodeURIComponent('https://yourdomain.com/callback'); const scope = 'snsapi_userinfo'; // 需要获取用户信息时使用 const state = '随机生成的防CSRF令牌'; window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`; ``` **参数说明**: - `scope=snsapi_userinfo`:获取用户个人信息 - `scope=snsapi_base`:仅获取openid - `#wechat_redirect`:强制在微信浏览器中显示授权页[^4]。 --- #### 三、后端处理回调并获取用户信息 1. **接收微信回调的code** 微信授权成功后,会将用户重定向到`redirect_uri`并附带`code`和`state`参数。前端需从URL中提取`code`并发送给后端: ```javascript // 前端回调页面(如/callback路由) const code = new URLSearchParams(window.location.search).get('code'); axios.post('/api/wechat-login', { code, state }); ``` 2. **后端用code换取access_token** 后端向微信接口发起请求,换取用户凭证: ```bash GET https://api.weixin.qq.com/sns/oauth2/access_token? appid=APPID& secret=APPSECRET& code=CODE& grant_type=authorization_code ``` **响应示例**: ```json { "access_token": "ACCESS_TOKEN", "expires_in": 7200, "refresh_token": "REFRESH_TOKEN", "openid": "OPENID", "scope": "snsapi_userinfo" } ``` 3. **获取用户信息(可选)** 若`scope=snsapi_userinfo`,可进一步调用接口: ```bash GET https://api.weixin.qq.com/sns/userinfo? access_token=ACCESS_TOKEN& openid=OPENID& lang=zh_CN ``` **响应示例**: ```json { "openid": "OPENID", "nickname": "用户昵称", "headimgurl": "头像URL", "unionid": "UNIONID" // 如果已绑定开放平台 } ``` --- #### 四、安全与配置注意事项 1. **HTTPS要求** 微信要求所有回调地址必须为HTTPS协议。 2. **State参数验证** 后端需校验前端传递的`state`是否与生成时一致,防止CSRF攻击。 3. **Token存储与刷新** `access_token`有效期2小时,需通过`refresh_token`定期刷新(有效期30天)。 --- #### 五、完整流程示意图 ```mermaid sequenceDiagram participant 用户 participant 前端 participant 后端 participant 微信服务器 用户->>前端: 点击微信登录 前端->>微信服务器: 重定向到授权微信服务器-->>用户: 显示授权确认页 用户->>微信服务器: 同意授权 微信服务器->>前端: 回调redirect_uri携带code 前端->>后端: 发送code和state 后端->>微信服务器: 用code换取access_token 微信服务器-->>后端: 返回access_tokenopenid 后端->>微信服务器: 请求用户信息(可选) 微信服务器-->>后端: 返回用户信息 后端-->>前端: 返回登录态(如JWT) ``` ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值