网页在非微信浏览器打开跳转微信授权登录

现要在手机H5页面上,加入微信授权登录功能,需要在非微信浏览器中实现。
比如腾讯云,在手机浏览器中打开(比如qq或者uc之类的),选择微信登录时,他可以调起微信app授权,然后确认授权后,又会跳回到原来的手机浏览器,并且已经是微信登录状态了。请问这个怎么弄的

非微信浏览器啊,目前对普通用户开放的就开放平台的web应用,但是这个扫码来实现,不能像微信浏览器那样自动oauth授权后登陆。不要看腾讯云这种案例,原本就是一家的,肯定会提供h5类的接口

在 H5 页面中点击 "微信登录" 按钮。

向服务端发送请求,获取微信登录所需的授权地址。

在 H5 页面中使用 JavaScript 在新窗口中打开授权地址。

用户在微信中确认授权后,会跳转到授权后重定向的地址,此地址中包含了授权码 code。

在 H5 页面中使用 JavaScript 关闭新窗口,并向服务端发送请求,使用授权码 code 向微信服务端申请访问令牌 access_token 和用户信息。

服务端向微信服务端申请访问令牌 access_token 和用户信息,并将结果返回给 H5 页面。

H5 页面接收服务端返回的访问令牌 access_token 和用户信息,并将用户信息显示在页面上。

需要注意的是,上述流程中的第 3 步和第 5 步使用的是 JavaScript 在新窗口中打开和关闭授权地址,因此这部分代码可能会被浏览器拦截,需要使用方案来解决。此外,第 4 步中的授权码 code 也有可能被拦截,因此可以使用 URL 重定向的方式来传递

提供实例参考【微信第三方登陆实现-微信浏览器实现弹出提示授权非微信浏览器提供二维码】,链接:https://www.likecs.com/show-204174312.html

微信授权登录功能可以通过微信开放平台的网页授权流程来实现。

首先,你需要在微信开放平台注册一个开发者账号,并创建一个应用。

然后,在你的 H5 页面中加入一个按钮,点击该按钮时,使用 JavaScript 调用微信网页授权接口,跳转到微信的授权页面。

用户在微信的授权页面中确认授权后,会跳转回你的 H5 页面。这时,你可以通过调用微信提供的接口获取用户的授权信息,并完成登录流程。

具体实现方法请参考微信开放平台的文档:

微信网页授权:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
获取用户基本信息:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#4
希望这些信息能帮到你。

https://blog.csdn.net/weixin_39940425/article/details/115241643?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167212278016782425126942%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=167212278016782425126942&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~pc_rank_34-2-115241643-null-null.142^v68^pc_new_rank,201^v4^add_ask,213^v2^t3_esquery_v3&utm_term=%E7%BD%91%E9%A1%B5%E5%9C%A8%E9%9D%9E%E5%BE%AE%E4%BF%A1%E6%B5%8F%E8%A7%88%E5%99%A8%E6%89%93%E5%BC%80%E8%B7%B3%E8%BD%AC%E5%BE%AE%E4%BF%A1%E6%8E%88%E6%9D%83%E7%99%BB%E5%BD%95&spm=1018.2226.3001.4187

H5 及 web 页面微信授权登录流程
借鉴下
https://blog.csdn.net/joe0235/article/details/115935515

首先需要在微信公众平台中注册并认证网站,并获取到一个 AppID 和 AppSecret。

然后可以在网站中添加如下 HTML 代码,来实现微信登录按钮:

<!-- 微信登录按钮 -->
<button id="login-btn">微信登录</button>

在页面加载完成后,可以使用 JavaScript 代码来处理点击微信登录按钮的事件,并跳转到微信授权页面:

// 点击微信登录按钮
document.getElementById('login-btn').addEventListener('click', function() {
  // 跳转到微信授权页面
  window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + encodeURIComponent(redirect_uri) + '&response_type=code&scope=snsapi_userinfo#wechat_redirect';
});

在这里appid 是在微信公众平台中获取的 AppID,redirect_uri 是网站地址,当用户授权完成后,微信会回调 redirect_uri 并带上授权码(code 参数)。

接下来需要在网站服务器端接收到这个回调请求后,使用 AppID、AppSecret 和授权码,向微信服务器发送请求,来获取用的 Access Token 和用户信息。

在服务器端,可以使用以下代码来获取 Access Token 和用户信息:

// 获取 Access Token 和用户信息
const url = 'https://api.weixin.qq.com/sns/oauth2/access_token?appid=' + appid + '&secret=' + appsecret + '&code=' + code + '&grant_type=authorization_code';
const response = await fetch(url);
const data = await response.json();

const access_token = data.access_token;
const openid = data.openid;

// 获取用户信息
const url = 'https://api.weixin.qq.com/sns/userinfo?access_token=' + access_token + '&openid=' + openid + '&lang=zh_CN';
const response = await fetch(url);
const userinfo = await response.json();

在这里access_token 是访问令牌,openid 是用户唯一标识,userinfo 包含了用户的详细信息,如头像、昵称、性别等。

最后可以将用户信息存储到网站数据库中,并将用户设置为已登录状态,即可完成微信授权登录的流程。

这个功能可以通过使用微信的授权登录接口实现。在手机浏览器中,可以调用微信的 OAuth2.0 授权接口,用于获取用户的授权。

具体的实现步骤如下:

  1. 在微信公众平台申请开发者账号,并创建网站应用。
  1. 在手机浏览器中,使用以下链接调起微信授权登录:
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

其中,APPID 是你在微信公众平台创建的网站应用的 appid,REDIRECT_URI 是授权后要回调的地址,SCOPE 是授权的范围(如 snsapi_userinfo 表示获取用户的基本信息),STATE 是自定义的参数。

  1. 用户确认授权后,会跳转到 REDIRECT_URI 地址,并附带上 CODE 参数。
  1. 使用 CODE 换取 access_token 和 openid。

获取 access_token 和 openid 的方法如下:

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

其中,APPID 和 SECRET 是你在微信公众平台创建的网站应用的 appid 和 secret,CODE 是上一步获取的 CODE 参数。

使用 access_token 和 openid 获取用户信息。
获取用