技术分享

经历了两次完整的网站接入微信登录开发,第2次开发从注册账号到最终上线全部参与完成,觉得有必要把我的开发流程详细记录下来.供后面查阅

微信开放平台注册:

微信开放平台链接:https://open.weixin.qq.com/ 注册登录后,在管理中心的网站应用中,点击创建网站应用.

创建完成后点击进入应用,在接口信息下申请开通微信登录.开发信息里的授权回调域填写真实线上的域名.
开通成功后,在开放平台上记录下来AppID和AppSecret,开发后台接口时需要用到.

后台接口开发

官方文档: https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html
后台需要对接的接口一般有两个,一个是获取access_token和open_id,另外一个是根据access_token和openid获取用户信息.我这边是用egg开发,贴一下关键代码,非常简单

  // 根据code获取access_token
  async getAccessToken(code) {
    const wx = this.config.wxConfig
    const url = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${wx.appid}&secret=${wx.appSecret}&code=${code}&grant_type=authorization_code`

    const res = await axios.get(url)

    return res.data
  }

  // 根据access_token和open_id获取用户信息(昵称,头像)
  async getUserInfo(accessToken, openid) {
    const url = `https://api.weixin.qq.com/sns/userinfo?access_token=${accessToken}&openid=${openid}&lang=zh_CN`
    const res = await axios.get(url)

    return res.data
  }

小提示:后台开发过程中可以直接用手机扫码拿到重定向链接里的code,然后用postman直接http请求,扫码链接微信有提供: https://open.weixin.qq.com/connect/qrconnect?appid=[AppID]&redirect_uri=[重定向链接]&response_type=code&scope=snsapi_login&state=123456#wechat_redirect,标记中括号的地方需要替换成真实信息,其中重定向链接是微信用户扫码确认后浏览器会自动访问这里填的链接,注意域名要和开放平台里填写的一致.

后端代码通过postman调试通过后,就是前端代码开发了.前端代码调试比较麻烦一点,这里详细讲一下我的解决方案:

生成ssl证书

这个可以自行搜索使用openssl创建证书,这里贴个链接供参考https://developer.aliyun.com/article/617249
然后本地安装nginx(也可以用其他的web服务器,我对nginx的转发比较熟而已)

nginx下载及启动

nginx下载地址:http://nginx.org/en/download.html 其中单数为测试,双数为稳定,如1.21.x就是测试,不过本地开发调试无所谓都没问题,下载好后解压在文件夹路径下打开cmd 运行 start ./nginx.exe就启动了(linux下安装和启动平时用的更多,就不说了)

nginx配置

nginx安装路径下找到./conf/nginx.conf 打开编辑添加 server配置:(可以写在默认配置的server 上面)

        ...
    server {
        listen                443    ssl;
        server_name            [线上真实域名];
        ssl_certificate        ../cert/ssl.crt;   # 证书位置
        ssl_certificate_key    ../cert/ssl.key;   # 同上
    
        location / {
              proxy_pass        http://127.0.0.1:xxxx;  # 前端启动后的端口号记得改
        }
    }
        ...

编辑完成后保存,nginx -s reload 重启
(启动失败的话注意一下本地的80端口和443端口是否有其他服务,常见的是window自带的IIS启动了的原因.

本地host配置

我们还需要把域名解析转发到本地来,window下的目录在 C:\Windows\System32\drivers\etc\hosts
添加一行127.0.0.1 线上真实域名
我这边是用的utools的hosts切换插件,切换起来非常方便(注意个别window启动hosts插件白屏的原因是根本没有那个文件,自己在目录下新建一个就好了)

然后就是开发调试了,本地前端代码启动后,不要访问http://localhost:xxxx ,直接访问https://线上真实域名 (nginx配置反向代理后会代理到你启动的端口号)

注意这里浏览器会提示你网站有危险(你自己本地创建的证书浏览器当然不认了),window直接点仍然访问就可以了,mac下的chrome需要在页面下输入:thisisunsafe

前端代码开发

这个没啥说的,简单的做法就是直接跳转 https://open.weixin.qq.com/connect/qrconnect?appid=[AppID]&redirect_uri=[重定向链接]&response_type=code&scope=snsapi_login&state=123456#wechat_redirect
我用的是引用文件https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js然后通过js加载二维码.

 var obj = new WxLogin({
 self_redirect:true,
 id:"login_container", 
 appid: "", 
 scope: "", 
 redirect_uri: "",
  state: "",
 style: "",
 href: ""
 });

然后在跳转的redirect_uri里面拿到url的code和state(假设你做了state为了验证登录是不是你的网站里发起的)
整个微信登录的开发其实很简单,主要是本地开发环境搭建麻烦点,这里记录一下以便将来再开发时查阅.

本地开发微信登录流程记录