uniapp 实现微信授权登录

uniapp 实现微信授权登录

### 一、配置微信开发者工具

1. 打开 [微信公众平台](https://mp.weixin.qq.com/)，登录后，点击左侧的“设置”，然后点击“开发者设置”，开启开发者模式


2. 在开发者设置中，点击“修改”按钮，设置服务器域名，绑定开发者工具


3. 下载并安装 [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)

4. 打开微信开发者工具，点击“添加项目”，填写项目名称，选择项目目录，AppID 填写上面设置的 AppID，点击“确定”


### 二、配置 uni-app

1. 打开 [微信公众平台](https://mp.weixin.qq.com/)，登录后，点击左侧的“设置”，然后点击“开发者设置”，获取 AppID 和 AppSecret


2. 在项目根目录下新建 `manifest.json` 文件，填写 AppID 和 AppSecret

```js
{
    "name": "uni-app-login",
    "description": "uni-app login demo",
    "platforms": [
        "App",
        "H5",
        "Wechat"
    ],
    "mp-weixin": {
        "appid": "wx7******6",
        "appsecret": "07a******d"
    }
}
```

### 三、实现微信授权登录

1. 在 `pages.json` 中注册需要授权的页面

```js
"pages": {
    "pages/login/login": {
        "navigationBarTitleText": "微信登录"
    }
}
```

2. 在 `pages/login/login.vue` 中，调用 `uni.login` 接口，实现微信授权登录

```js
<script>
export default {
    methods: {
        weixinLogin() {
            uni.login({
                provider: 'weixin',
                success: (res) => {
                    console.log('success: ' + JSON.stringify(res));
                    // 获取 code
                    let code = res.code;
                    // 请求服务端，获取用户信息
                    uni.request({
                        url: 'http://localhost:3000/user/login',
                        data: {
                            code
                        },
                        success: (res) => {
                            console.log('success: ' + JSON.stringify(res));
                            // 登录成功
                            uni.showToast({
                                title: '登录成功'
                            });
                        }
                    });
                },
                fail: (err) => {
                    console.log('fail: ' + JSON.stringify(err));
                }
            });
        }
    }
}
</script>
```

3. 在服务端，使用 code 换取用户信息

```js
// 获取用户信息
router.post('/user/login', async (ctx) => {
    // 获取 code
    let code = ctx.request.body.code;
    // 获取 AppID 和 AppSecret
    let appid = 'wx7******6';
    let appsecret = '07a******d';
    // 请求微信服务端，获取 openid 和 session_key
    let url = `https://api.weixin.qq.com/sns/jscode2session?appid=${appid}&secret=${appsecret}&js_code=${code}&grant_type=authorization_code`;
    let result = await axios.get(url);
    // 获取 openid 和 session_key
    let openid = result.data.openid;
    let session_key = result.data.session_key;
    // 返回结果
    ctx.body = {
        openid,
        session_key
    };
});
```

### 四、实现微信小程序授权登录

1. 在 `pages.json` 中注册需要授权的页面

```js
"pages": {
    "pages/login/login": {
        "navigationBarTitleText": "微信登录"
    }
}
```

2. 在 `pages/login/login.vue` 中，调用 `uni.getUserInfo` 接口，实现微信授权登录

```js
<script>
export default {
    methods: {
        weixinLogin() {
            uni.getUserInfo({
                provider: 'weixin',
                success: (res) => {
                    console.log('success: ' + JSON.stringify(res));
                    // 获取用户信息
                    let userInfo = res.userInfo;
                    // 请求