电脑版微信登录不扫二维码登录

方法一

实现微信登录需要以下几个步骤：

注册微信公众平台 / 微信开放平台 / 微信小程序。获取AppID和AppSecret。这些是用于通过OAuth2授权获取访问令牌和用户信息的凭据。在前端页面集成微信登录按钮，并使用微信JS-SDK生成签名和调用微信登录接口。在后端创建一个OAuth2.0的授权认证接口来接收来自微信JS-SDK的请求。该接口将使用AppID和AppSecret获取访问令牌以及一些用户个人信息。在后端验证用户Token是否有效。如果有效，则返回用户的完整信息。前端通过成功接收的用户信息，完成自己的登录过程。

下面是一个使用Vue.js框架实现微信登录的示例代码：

微信登录import wx from ‘weixin-js-sdk‘;import axios from ‘axios‘;export default {data() {return {accessToken: ‘‘,userInfo: {},};},mounted() {// 配置微信JS-SDKaxios.get(‘/api/wechat/signature‘).then((response) => {const data = response.data;wx.config({debug: true,appId: data.appId,timestamp: data.timestamp,nonceStr: data.nonceStr,signature: data.signature,jsApiList: [‘login‘, ‘getUserInfo‘, ‘checkSession‘],});});},methods: {// 点击微信登录按钮，触发微信登录wechatLogin() {const that = this;wx.checkSession({success() {console.log(‘session有效‘);wx.login({success(res) {if (res.code) {axios.post(‘/api/login/wechat‘, { code: res.code }).then((response) => {that.userInfo = response.data;});} else {console.log(‘登录失败！‘ + res.errMsg);}},});},fail() {console.log(‘session失效‘);// session失效时，重新生成sessionwx.login({success(res) {if (res.code) {axios.post(‘/api/login/wechat‘, { code: res.code }).then((response) => {that.userInfo = response.data;});} else {console.log(‘登录失败！‘ + res.errMsg);}},});},});},},};

在上面的代码中，我们首先在mounted()钩子中配置微信JS-SDK。接着，当用户点击微信登录按钮时，wehcatLogin()方法被调用，用于调用微信登录接口并获取用户信息。最后，我们通过axios来向后端的OAuth2.0接口发送请求，验证令牌，获取用户信息，并把用户信息保存到userInfo变量中。

方法二：

微信登录有两种方式，一种是通过微信授权登录实现，另一种是通过微信开放平台的扫码登录实现。下面是这两种方式的示范代码：

通过微信授权登录实现：

在需要接入微信登录的前端页面中加入微信授权登录按钮，如下所示：// 初始化微信JS SDKwx.config({// 配置参数appId: ‘YOUR_APP_ID‘,timestamp: ‘YOUR_TIMESTAMP‘,nonceStr: ‘YOUR_NONCE_STR‘,signature: ‘YOUR_SIGNATURE‘,jsApiList: ["checkJsApi", "login"]});// 点击微信登录按钮之后执行的函数const wxLogin = () => {wx.checkJsApi({jsApiList: [‘login‘],success: function(res) {if (res.checkResult.login == true) {wx.login({success: function (res) {if (res.code) {// 将 code 发送给服务端，服务端就可以获取到用户 openid 等信息console.log(‘用户code:‘, res.code);} else {console.log(‘登录失败！‘ + res.errMsg);}}});} else {console.log(‘微信登录不可用！‘);}}});}// 绑定微信登录按钮的点击事件，执行 wxLogin 函数document.getElementById(‘wxLoginBtn‘).addEventListener(‘click‘, wxLogin);

在执行上述代码之前，请先替换其中的 YOUR_APP_ID 、 YOUR_TIMESTAMP 、 YOUR_NONCE_STR 和 YOUR_SIGNATURE 等配置参数为您的微信公众号的真实信息。

通过微信开放平台的扫码登录实现：

在您的网站中添加微信扫码登录入口，如下所示：

在执行上述代码之前，请先替换 YOUR_APPID 和 YOUR_REDIRECT_URI 为您在微信开放平台中创建的应用程序的 AppID 和回调 URL。

在回调URL的后端代码中，使用以下代码获取微信用户的 openid:// 获取微信用户的 access_token，并设置响应头 Access-Control-Allow-Origin *app.use(async(ctx, next) => {if (ctx.url.indexOf(‘/authCallback‘) >= 0) {let code = ctx.query.code;let tokenBaseUrl = ‘https://api.weixin.qq.com/sns/oauth2/access_token?appid=‘ + WX_APP_ID + ‘&secret=‘ + WX_APP_SECRET + ‘&code=‘ + code + ‘&grant_type=authorization_code‘;let response = await axios.get(tokenBaseUrl);ctx.set(‘Access-Control-Allow-Origin‘, ‘*‘);ctx.response.body = response.data;await next();}});// 获取当前 accessToken 对应的微信用户的 openid，并设置响应头 Access-Control-Allow-Origin *app.use(async(ctx, next) => {if (ctx.url.indexOf(‘/getOpenid‘) >= 0) {let accessToken = ctx.query.accessToken;let openidBaseUrl = ‘https://api.weixin.qq.com/sns/auth?access_token=‘ + accessToken + ‘&openid=OPENID‘;let response = await axios.get(openidBaseUrl);ctx.set(‘Access-Control-Allow-Origin‘, ‘*‘);ctx.response.body = response.data;await next();}});

在执行上述代码之前，请先替换 WX_APP_ID 和 WX_APP_SECRET 为您在微信开放平台中创建的应用程序的 AppID 和 AppSecret。

方法三

使用微信登录需要进行以下几个步骤：

在微信公众平台开发者中心进行应用的注册和配置，获取APPID和APPSECRET。同时需要在开发者中心的网页授权获取用户基本信息中配置回调URL。接收到微信授权后回调服务器，并且在请求时带上code参数。code只能使用一次，用于获取access_token，并且access_token有效期为2小时。如果需要刷新access_token，需要使用refresh_token。使用access_token和openid调用微信API，获取用户信息和权限。

以下是一个简单的微信登录实现代码

// 引入axios库import axios from ‘axios‘;// 微信登录async wechatLogin() {// 微信登录获取codeconst authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${yourappid}&redirect_uri=${encodeURIComponent(callbackUrl)}&response_type=code&scope=snsapi_userinfo&state=wechat#wechat_redirect`;const { code } = await this.$router.push(authUrl);// 获取access_tokenconst resp1 = await axios.get(`https://api.weixin.qq.com/sns/oauth2/access_token?appid=${yourappid}&secret=${yoursecret}&code=${code}&grant_type=authorization_code`);const { access_token, openid } = resp1.data;// 获取用户信息const resp2 = await axios.get(`https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openid}&lang=zh_CN`);console.log(resp2.data);}

代码中使用了axios库进行了网络请求，实现了获取code、access_token和用户信息的功能。您需要将代码中的 yourappid 和 yoursecret 替换为您在微信公众平台开发者中心中获取的 APPID 和 APPSECRET。同时，您也需要配置回调URL。当用户授权通过后，微信会将用户重定向到您设置的回调URL，并将code作为url的参数。之后，您可以使用axios库访问微信API，获取用户信息。

需要注意的是，微信API的调用需要满足微信的网络请求安全策略，需要进行签名验证等操作。因此，建议您先从微信官方文档了解微信API的调用方式和相关安全策略，然后再进行代码的编写。