目录

一、官方给的获取openid步骤

第一步：用户同意授权，获取code

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

第三步：刷新access_token（如果需要）

第四步：拉取用户信息(需scope为 snsapi_userinfo)

二、前端需要做的事

三、使用openid协助登录逻辑

四、获取openid部分的vue代码样例

微信官方文档——微信网页开发 /网页授权

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

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

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

值得注意的是scope参数有两种，按需选择：

1.snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid）

2.snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）

用户同意授权后，页面将跳转至 redirect_uri/?code=CODE&state=STATE。

这里通过code换取的是一个特殊的网页授权access_token,与基础支持中的access_token（该access_token用于调用其他接口）不同。公众号可通过下述接口来获取网页授权access_token。如果网页授权的作用域为snsapi_base，则本步骤中获取到网页授权access_token的同时，也获取到了openid，snsapi_base式的网页授权流程即到此为止。

尤其注意：由于公众号的secret和获取到的access_token安全级别都非常高，必须只保存在服务器，不允许传给客户端。后续刷新access_token、通过access_token获取用户信息等步骤，也必须从服务器发起。

所以这部分会由后端负责完成，如果使用snsapi_base只需要获取openId的话，流程其实到这里就结束了。

由于access_token拥有较短的有效期，当access_token超时后，可以使用refresh_token进行刷新，refresh_token有效期为30天，当refresh_token失效之后，需要用户重新授权。

如果网页授权作用域为snsapi_userinfo，则此时开发者可以通过access_token和openid拉取用户信息了。

简单地说，前端只需要引导关注者打开如下页面：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect ，获取到返回的code，传给后端，后端再将他获取到的openid返回给我们即可。

我这里的业务需求是，客户本身有一套自己的登录系统，要跳转到他们的页面上。但是假如已经在微信上打开登过呢，就不再跳转他们的登录页，可以直接登录进去了。

所以大概逻辑就是

1.前端获取code，传给后端换取openid

2.调用后端的登录接口传openId尝试登录，如果没有绑定过账户会登录失败跳转到第三方登录页面，绑定过的话直接登录成功，存下token。

3.跳转到第三方登录，成功的话会返回一个第三方的code（非微信code）给我，与openid一同再传回给后端进行绑定。

4.再次调用那个需要openid的登录接口，成功之后存下token。