微信网页登录接口实战

James吖

于 2024-08-23 20:27:48 发布

阅读量985

点赞数 9

文章标签：数据库 vue 大数据 java 开发语言微信 arcgis

本文链接：https://blog.csdn.net/qq_46292480/article/details/141474133

版权

随着移动互联网的发展，社交登录成为了一种便捷的用户认证方式。微信作为中国最大的社交平台之一，提供了网页授权机制，允许用户通过微信扫描二维码的方式登录第三方网站。本文将详细介绍如何在自己的Web应用中集成微信网页登录接口，从而提高用户体验。

一、准备工作

在开始之前，请确保完成以下准备工作：

注册微信公众平台账号：
- 访问微信公众平台官网 (https://mp.weixin.qq.com)，注册并登录账号。
- 创建一个新的公众号（如果已有公众号，则可直接使用），并获取AppID和AppSecret。
配置公众号信息：
- 在公众平台管理后台，配置公众号的基本信息，包括网站地址等。
- 配置“网页授权接口配置”，填写授权回调域名。

二、获取临时登录凭证code

用户访问带有特定参数的微信授权页面，会重定向到指定的回调URL，并携带一个临时的code参数。这个code将用于下一步获取access_token。

微信授权页面链接格式：

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

appid: 公众号的唯一标识。
redirect_uri: 授权后重定向的回调链接地址，请使用urlencode对链接进行处理。
scope: 应用授权作用域，snsapi_base（不弹出授权页面，直接跳转，只能获取用户openid）；snsapi_userinfo（弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）。
state: 重定向后会带上state参数，可用作防止CSRF攻击（跨站请求伪造攻击），建议随机生成一个固定长度的字符串。

三、通过code换取网页授权access_token

通过上一步获得的code，向微信服务器发起POST请求，以换取access_token。

请求地址：

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

响应数据：

1{
2    "access_token":"ACCESS_TOKEN",
3    "expires_in":7200,
4    "refresh_token":"REFRESH_TOKEN",
5    "openid":"OPENID",
6    "scope":"SCOPE"
7}

其中，access_token是调用微信API接口凭证，openid是用户唯一标识。

四、刷新access_token

access_token的有效期较短，可以通过refresh_token来刷新access_token。

请求地址：

https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

五、拉取用户信息(需scope为 snsapi_userinfo)

使用access_token和openid来获取用户基本信息。

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

响应数据：

{
    "openid":"OPENID",
    "nickname":"NICKNAME",
    "sex":1,
    "province":"PROVINCE",
    "city":"CITY",
    "country":"COUNTRY",
    "headimgurl":"http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0",
    "privilege":[
        "PRIVILEGE1",
        "PRIVILEGE2"
    ],
    "unionid": " oV7hM_TF22lZ0m97s41TX5ol_v64 "
}

六、实现示例

以下是一个简单的示例，展示如何使用Express.js框架来实现上述流程。

Node.js示例代码：

const express = require('express');
const app = express();
const request = require('request'); // 使用request模块发送HTTP请求

app.get('/auth', (req, res) => {
  const redirectUri = encodeURIComponent('http://yourwebsite.com/callback');
  const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=YOUR_APPID&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
  res.redirect(url);
});

app.get('/callback', (req, res) => {
  const code = req.query.code;
  const options = {
    url: 'https://api.weixin.qq.com/sns/oauth2/access_token',
    qs: {
      appid: 'YOUR_APPID',
      secret: 'YOUR_SECRET',
      code,
      grant_type: 'authorization_code'
    },
    json: true
  };

  request.get(options, (error, response, body) => {
    if (!error && response.statusCode === 200) {
      const { openid, access_token } = body;
      console.log(`OpenID: ${openid}, Access Token: ${access_token}`);
      // 这里可以保存用户信息到数据库，并设置session
      res.send('登录成功！');
    } else {
      res.status(500).send('登录失败！');
    }
  });
});

app.listen(3000, () => console.log('Listening on port 3000...'));

请替换YOUR_APPID和YOUR_SECRET为你的公众号对应的AppID和AppSecret。