微信小程序登录流程

image.png

官方流程说明

1. 调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。
2. 调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 和 会话密钥 session_key。

之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。

注意：

1. 会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥。
2. 临时登录凭证 code 只能使用一次

白话文

1.调用wx.login拿到code发给服务器
2.服务器拿到code, appid, appsecret向微信发起登录凭证校验请求auth.code2Session
3.拿到openid, session_key, 建立后台用户关系与登录状态，比如返回token
4.将token返回给客户端, 客户端请求时需要携带token，服务器需校验客户端携带的token, 正确则正常返回数据, 错误则无法通过校验

服务器端

from flask import Flask, request
import requests

app = Flask(__name__)


# 处理小程序的登录请求
@app.route('/login', methods=['POST'])
def login():
    # 接收小程序发来的code
    code = request.form.get('code')
    # 向微信发起请求，拿到openid, session_key
    appid = '你的appid'
    secret = '你的secret'
    grant_type = 'authorization_code'
    url = """https://api.weixin.qq.com/sns/jscode2session?appid={appid}&secret={secret}&js_code={js_code}&grant_type={grant_type}""".format(appid=appid, secret=secret, js_code=code, grant_type=grant_type)
    print(url)
    resp = requests.get(url)
    print(resp.json())
    return resp.json()

if __name__ == '__main__':
    app.run(debug=True)

uni-app端

<template>
    <view class="content">
        <button @click="login">登录</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {
        
        },
        methods: {
            login(){
                uni.login({
                  provider: 'weixin',
                  success: function (loginRes){
                    // 拿到code
                    console.log(loginRes.code);
                    // 将code发给后端
                    uni.request({
                        url: 'http://127.0.0.1:5000/login',
                        method: "POST",
                        header:{
                            "content-type": "application/x-www-form-urlencoded"
                        },
                        data: {
                            "code": loginRes.code
                        },
                        success: res =>{
                            console.log("res->", res);
                        }
                    })
                  }
                });
            }
        }
    }
</script>

<style scoped>
    
</style>