你笑了

你的笑，是星星跳跃浪花的笑

0%

微信登录

发表于 分类于

简介

在不同终端平台（App、网站、移动端网页、小程序）的服务中接入微信登录

类型 授权域/接口 用户侧使用流程 接入流程
App 接入微信SDK，并调用snsapi_userinfo （1）在App内选择使用微信登录 （2）拉起微信客户端，打开用户授权页，完成登录授权 （1）注册微信开放平台（open.weixin.qq.com）帐号，并完成开发者资质认证 （2）申请【App移动应用】并审核通过后可以使用，查看开发文档
网站应用 snsapi_login （1）用户使用微信“扫一扫”，在PC端扫码（2）客户端打开授权页，完成登录授权 （1）注册微信开放平台（open.weixin.qq.com）帐号，并完成开发者资质认证（2）申请【网站应用】并审核通过后可以使用，查看开发文档
微信客户端内H5 使用公众号的登录能力： snsapi_base snsapi_userinfo snsapi_base：静默授权 snsapi_userinfo： （1）用户在H5内点击登录，唤起授权弹窗 （2）用户侧完成登录授权 （1）注册微信公众号，选择“服务号”类型，并完成微信认证（2）在公众号管理后台设置回调域名（3）接入微信登录能力，查看开发文档
小程序 wx.login wx.getUserInfo wx.login：静默授权，开发者可获取openid wx.getUserInfo： （1）用户在小程序内点击组件，唤起登录窗口（2）用户侧完成登录授权 （1）注册小程序 （2）接入微信登录功能，查看开发文档，查看登录流程设计指引

多平台服务，可通过 UnionID 来唯一标识用户

open_id 仅针对某个产品（公众号、小程序），而 union_id 是开放平台下，某个用户的唯一标识（产品需绑定到开放平台）

开放平台登录

基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统，允许微信用户使用微信身份安全登录第三方应用或网站。目前支持authorization_code模式，适用于拥有server端的应用授权

在微信用户授权登录已接入微信OAuth2.0的第三方应用后，第三方可以获取到用户的接口调用凭证（access_token），通过access_token 可以进行微信开放平台授权关系接口调用，实现获取微信用户基本开放信息和帮助用户实现基础开放功能等。

准备工作

  1. 在微信开放平台注册开发者账号

    不需要注册公众号

  2. 注册一个第三方应用（网站应用、移动应用），审核通过并获得相应的AppID和AppSecret

  3. 申请微信登录且通过审核后，可开始接入流程

流程[网站应用]

时序图

简易时序图

详细时序图

获取code

前端：发起微信登录请求，微信用户授权第三方应用，微信拉起第三方应用或重定向到第三方网站，带上授权临时票据code参数

  • 1-4

    选择微信登录，跳转到 https://open.weixin.qq.com/connect/qrconnect页面

    构造OAuth2链接

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

    • redirect_uri

      需使用urlEncode对链接进行编码

    • scope

      应用授权作用域，网页应用目前仅填写snsapi_login

    • state

      用于保持请求和回调的状态，授权请求后原样带回给 redirect_uri 页面

    例如：腾讯视频、极客时间

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    腾讯视频OAuth2链接
    https://open.weixin.qq.com/connect/qrconnect?
    appid=wx5ed58254bc0d6b7f&
    redirect_uri=https%3A%2F%2Fvideo.qq.com%2Ftransfer_login_page%2Findex.html%3Fvplatform%3D2%26type%3Dwx%26appid%3Dwx5ed58254bc0d6b7f&
    response_type=code&
    scope=snsapi_login&
    state=111&
    self_redirect=true&
    href=https%3A%2F%2Fvm.gtimg.cn%2Ftencentvideo%2Fvstyle%2Fweb%2Fcommon%2Fstyle%2Fiframe_login_wx.css%3Fmax_age%3D7776001

    极客时间OAuth2链接
    https://open.weixin.qq.com/connect/qrconnect?
    appid=wx1b4c7610fc671845&
    redirect_uri=https%3A%2F%2Faccount.geekbang.org%2Faccount%2Foauth%2Fcallback%3Ftype%3Dwechat%26ident%3D40f331%26login%3D0%26cip%3D0%26redirect%3Dhttps%253A%252F%252Faccount.geekbang.org%252Fthirdlogin%253Fremember%253D1%2526type%253Dwechat%2526is_bind%253D0%2526platform%253Dtime%2526redirect%253Dhttps%25253A%25252F%25252Ftime.geekbang.org%25252Fcolumn%25252F48%2526failedurl%253Dhttps%253A%252F%252Faccount.geekbang.org%252Fsignin%253Fredirect%253Dhttps%25253A%25252F%25252Ftime.geekbang.org%25252Fcolumn%25252F48&
    response_type=code&
    scope=snsapi_login&
    state=9c117d8b3abd7cc0c4bf6109e03e77c5#wechat_redirect

​

​

  • 5-7

    由微信根据传递的参数，生成一个二维码

    例如：腾讯视频、极客时间

​

​

  • 8-11

    向微信开放平台轮询二维码登录请求状态

    1
    GET https://lp.open.weixin.qq.com/connect/l/qrconnect?uuid=001rwTlS2nOK000W&_=1713880629598

  • 12-21

    用户用微信APP扫码，授权登录

    第18步

    • 如果长时间不确认，会返回”二维码已失效，请刷新页面重新扫码”

    第20步

    • 两个人，后扫码的先确认，登录成功，先扫码的后确认，会返回异常（系统错误，错误码10029）

​

  • 22-25

    重定向到 redirect_uri 的网址上，并带上code和state参数，在 redirect_uri 页面中调用服务端接口，传递code

    redirect_uri?code=CODE&state=STATE

获取 access_token

  • 26-30

服务端：通过code参数加上AppID和AppSecret等，通过API换取access_token

接口调用

  • 31-32

服务端：通过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作

第36步

  • 将二维码截图保存，A已经登录成功，B扫码正常，确认登录后，返回登录成功，但实际上PC端还是登录的A账号

网页授权登录

微信提供了OAuth2的授权登录方式，可以让从微信客户端打开的第三方网页获取用户基本信息，免去登录环节

整体逻辑同企业微信网页授权登录

准备工作

  1. 注册公众号，完成微信认证

  2. 开通接口权限：网页服务->网页授权->网页授权获取用户基本信息，配置授权回调页面域名

    测试公众号配置ip，例如：81.68.126.166:17671，则OAuth2链接中的 redirect_uri 为 http://81.68.126.166:17671

流程

时序图

获取code

构造OAuth2链接

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_base和snsapi_userinfo 权限）

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

  • redirect_uri

    重定向地址，使用https链接

    可以是一个前端页面，在前端页面中调用后端接口，传递code；也可以是后端入口点，后端直接获取code

获取 access_token

服务端：通过code参数加上AppID和AppSecret等，通过API换取网页授权access_token，与基础支持中的access_token（该access_token用于调用其他接口）不同。

如果网页授权的作用域为snsapi_base，则本步骤中获取到网页授权access_token的同时，也获取到了openid，snsapi_base式的网页授权流程即到此为止。

获取用户基本信息

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