H5项目调用微信授权并实现登录功能

已于 2024-07-03 10:27:20 修改
阅读量4.6k 收藏 37
点赞数 26
文章标签： 微信
于 2024-04-11 22:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36989919/article/details/137646488
版权

流程陈述篇

将H5项目嵌入到其他APP内并实现微信授权登录功能，通常涉及到几个关键步骤。以下是一个基本的实现流程：

1. 准备工作

注册并配置微信公众号/小程序：在微信公众平台注册并配置好你的公众号或小程序，获取到必要的AppID和AppSecret。

后端服务：你需要一个后端服务来处理微信登录的授权流程，包括接收前端发送的code，请求微信服务器获取access_token和openid，以及处理用户信息的存储和同步。

1.1进入官网注册公众号  微信公众平台

1.1.1进入设置与开发菜单
1.1.2进入公众号设置页面-账号详情tab页进行配置账户的基础信息

进行公众号的基础信息的配置（个体和公司资质不同根据官方提示提交相关资料即可）。

1.1.3进入公众号设置页面-功能设置tab页进行配置相关功能。

1.1.3.进行基本信息的配置

2. 前端（H5页面）

引入微信JS-SDK

最低0.47元/天 解锁文章
Happy鹏鹏
关注
uniapp - 超详细的 H5 公众号网页微信登录示例代码，提供从 0-1 公众号配置及详细注释代码（站在新手小白的角度）第三方微信授权登录的实现！！
高级前端工程师
03-03 6203
uniapp微信浏览器H5授权微信登录，UniApp开发H5接入微信登录的全过程，uniapp的H5页面使用微信登录，uniapp H5微信授权登录，H5之微信授权登陆 (uniapp网页版微信授权登录)，uni-app开发H5第三方微信授权登录的实现，uniapp如何实现微信授权登录，公众号H5页面接入微信登录流程，uni-app - 最详细 H5 网页接入微信登录功能，提供公众号配置与详细注释示例代码（移动端网页实现点击登录按钮后 调用微信公众号授权登录功能 详细讲解接入流程与详细示例代码）官方最新超级
uni-app - 最详细 H5 网页接入微信登录功能，提供公众号配置与详细注释示例代码（移动端网页实现点击登录按钮后 调用微信公众号授权登录功能 详细讲解接入流程与详细示例代码）官方最新超级详细教程
王佳斌
11-28 6623
uniapp中H5微信登录，uniapp H5微信授权登录，微信公众号第三方网页（H5）授权登录（OAuth2.0）流程及逻辑详细教程，UNIAPP 开发H5 怎么实现微信公众号登录功能，uniapp如何实现H5网页的公众号微信登录，怎么做uniapp微信登录，uniapp h5项目怎么实现微信登录的功能，uniapp微信浏览器H5授权微信登录，UniApp开发H5接入微信登录的全过程，uniapp的H5页面使用微信登录，uniapp H5微信授权登录，H5之微信授权登陆 (uniapp网页版微信授权登录)
h5 获取微信公众号授权登录
byf5229的博客
03-12 2736
微信扫码打开h5 获取微信公众号授权登录的code，如果跳转时自己原本携带的参数该如何进行授权。
微信h5 - 授权登录
pig_ning的博客
12-25 455
微信h5 - 授权登录
H5页面实现微信授权登录
weixin_61877032的博客
08-01 1万+
同一域名下部署两个项目前端需要做什么； 在微信小程序如何实现h5页面的授权登录；
前端微信H5 公众号实现授权登录 总结
最新发布
阿乐的博客
12-26 1127
这个页面 就是说微信会重定向到这个页面里 ·location.search· 这个 / 后面的参数 这个必填 是用来接收查询参数的 会有code 参数在这个查询参数里面。我们需要做一个判断 根据缓存判断 微信公众号 就是依据 微信的缓存进行判断开发 为了避免有太多的 重定向跳转 影响用户体验。其中的lOCAL 就是微信会帮我们跳转的地址 所以我们需要微信跳转回来哪个页面 我们就填哪个页面就好了。如果正式上线 我们需要 把本地IP变成 线上正式地址 但是我们为了调试方便 我们可以将这个两个都写上。
H5网页微信授权登录
yemuxia_sinian的博客
01-29 1万+
最近项目做了一个简单的H5在线点酒，用的vue-cli脚手架搭建，运行在微信环境，涉及到微信授权登录，jssdk的使用，微信支付等功能，现记录下一些流程，以便后续自己查阅。微信开发文档传送门 一、微信H5网页授权登录 授权登录流程微信开发文档已经写的很清楚了，如下： 1 第一步：用户同意授权，获取code 2 第二步：通过code换取网页授权access_token 3 第三步：刷新access_token（如果需要） 4 第四步：拉取用户信息(需scope为 snsapi_userinfo)
H5界面进行微信登录授权.docx
06-01
Html5界面使用微信授权登录的一些简单的疑惑问题，关于获取code，以及获取openid，结合微信给与的微信接口流程，一步一步获取
微信公众号 H5授权登录实现（最详细）
u013302168的博客
06-23 1万+
自己的网站、APP等第三方，要实现接入微信授权登录，有多种方式：微信公众号（网页）、微信小程序、微信开放平台（APP）等等。
移动端h5页面微信一键登录
朱远辉的博客
05-09 8135
在移动端的 H5 页面中，微信一键登录是一种常见的方式，可以方便地让用户使用已有的微信账号进行登录，并且提高用户的使用效率和体验。
h5移动端调用微信和支付宝支付的实现
12-29
改文档中主要说明了h5移动端调用微信和支付宝支付的实现，按照readme说明即可
h5移动端调用支付宝、微信支付的实现
08-30
解决在公众号中调起支付宝支付跳转浏览器的问题。使用方法：將ap.js 和pay.html引入到项目中，将需要跳转的支付宝支付地址传入pay.html中的code_url即可
前端H5实现微信授权
weixin_40565812的博客
06-30 1万+
前端H5实现微信授权
h5做微信登录
u014651200的博客
06-06 1万+
最近做了个微信登录。 本来一开始怎么也想不通一点，就是客户端申请第三方登录，需要跳转到微信界面，然后再靠一开始填写的url回到自己的界面，这样的话，服务端不知道到底是谁请求的第三方登录，把获得的userinfo交给谁。 后来仔细研读了微信登录模块，他第一个请求url有个state可以带给自己。所以我服务端验证靠state验证
H5微信网页授权登录
LH297的博客
11-24 1394
h5的微信登录好像只能在微信里打开链接地址进行登录，浏览器是不可以获取code，如果可以的话欢迎在评论区留言！里面说明了h5微信登录所运用到相对应的 值 在调用 微信的登录接口。拿到 code 像后端发送请求 返回token 完成登录跳转！设置微信网页授权域名设置一下就可以进行访问拿到 code 了。第二步的需要去微信公众号平台注册并拿到 appid。通过微信官方文档提供的接口进行登录并 拿到。
h5开发网站，授权微信登录的详细步骤
weixin_48596030的博客
07-20 7078
h5开发网站，授权微信登录的详细步骤
【H5】html实现微信授权登陆
热门推荐
热爱技术，享受生活
02-08 2万+
在一次前端项目中，需要在网页端拉起微信，实现微信授权登录，然后把调用微信API，获取到用户信息，返回给后端。网页授权分为两种，一种静默授权，一种非静默授权。微信网页授权是通过OAuth2.0机制实现的，在用户授权给公众号后，公众号可以获取到一个网页授权特有的接口调用凭证（网页授权access_token），通过网页授权access_token可以进行授权后接口调用，如获取用户基本信息；这篇文章就讲诉一下如何实现微信授权登录。需要在微信公众号后台配置后，才能后台才能调用成功哦～
uniapp H5如何调用微信登录
12-06
在uniapp中实现H5调用微信登录，可以通过以下步骤完成： 1. **配置微信公众号**： - 登录微信公众平台，进入“开发” -> “基本配置”，记录下AppID和AppSecret。 - 在“接口权限”中，确保已开通“网页授权获取用户基本信息”权限，并配置授权回调域名。 2. **前端代码**： - 在uniapp项目中，引入微信的JS SDK。 - 使用`uni.login`方法调用微信登录接口。 ```html <template> <button @click="login">微信登录</button> </template> <script> export default { methods: { login() { uni.login({ provider: 'weixin', success: (loginRes) => { // 登录成功后的处理逻辑 console.log(loginRes.authResult); // 这里可以发送登录凭证到服务器进行验证 }, fail: (err) => { console.error('登录失败：', err); } }); } }, mounted() { // 配置微信JS SDK uni.getProvider({ service: 'oauth', success: (res) => { if (~res.provider.indexOf('weixin')) { uni.login({ provider: 'weixin', success: (loginRes) => { // 登录成功后的处理逻辑 console.log(loginRes.authResult); } }); } } }); } } </script> ``` 3. **服务器端代码**： - 接收前端的登录凭证（code），并调用微信的接口获取用户信息。 - 使用AppID和AppSecret向微信服务器发送请求，获取access_token和openid。 - 使用access_token和openid获取用户的基本信息。 ```javascript const axios = require('axios'); async function getWeChatUserInfo(code) { const appid = 'YOUR_APPID'; const secret = 'YOUR_APPSECRET'; const url = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=${secret}&code=${code}&grant_type=authorization_code`; try { const response = await axios.get(url); const { access_token, openid } = response.data; const userInfoUrl = `https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openid}`; const userInfoResponse = await axios.get(userInfoUrl); return userInfoResponse.data; } catch (error) { console.error('获取微信用户信息失败：', error); } } ```
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值