微信公众号-授权登录

核心要点

公众号配置
通过授权获取code

一、公众号配置

配置安全域名，配置你的域名
配置开发者，如果你要用微信开发工具调试的情况

二、授权获取code


//login.vue<template><div class="wrap"><div class="head"><div class="head__logo"><img class="head__img" src="@/assets/login-logo.png"/><p>您好 请登录</p></div></div><div class="form"><div class="form__bottom"><button class="form__btn" @click="onLogin">微信授权用户信息</button><div class="form__read">请完成微信授权以后继续使用</div></div></div></div>
</template><script>import qs from 'qs';export default {data() {return {};},created() {let pagePath = decodeURIComponent(window.location.href); // 页面路径let pageArray = pagePath.split('?');if (pageArray.length > 1) {let pageParam = qs.parse(pageArray[1]) || {};// 重定向回来后截取codeif (pageParam.code) {this.getUserInfoByAccount(pageParam.code)}}},methods: {//返回首页onLogin() {loginWechat();},// 判断是否是微信环境getIsWechat() {let ua = navigator.userAgent.toLowerCase();let isWechat = false;if (String(ua.match(/MicroMessenger/i)) === 'micromessenger') {isWechat = true;} else {isWechat = false;}return isWechat;}// 微信授权登录loginWechat(wxAppId = '你的公众号id', wxRedirectUrl = '你要重定向的地址，要和上面配置的域名一致') {if (!getIsWechat()) return;if (!wxAppId) return;let wxState = 'authorize';wxRedirectUrl = encodeURIComponent(wxRedirectUrl);window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${wxAppId}&redirect_uri=${wxRedirectUrl}&response_type=code&scope=snsapi_userinfo&state=${wxState}#wechat_redirect`;}//用户登录，用code与后端接口交互，实现登录getUserInfoByAccount(code) {//请求后端接口,根据你的具体接口login({code: code}).then(res => {let data = res.data || {};//登录成功，执行到这里，自个做其他逻辑})},},};
</script>
<style lang="scss" scoped>.wrap {background-color: #ffffff;flex: 1;.head {display: flex;justify-content: center;padding: 30px 20px 20px 20px;.head__logo {display: flex;flex-direction: column;align-items: center;font-size: 28px;.head__img {width: 80px;height: 80px;display: block;margin-bottom: 10px;}}}.form {padding: 30px 20px;.form__row {display: flex;flex-wrap: nowrap;align-items: center;min-height: 50px;padding: 10px 0;margin-bottom: 10px;font-size: 16px;}.form__icon {flex: none;font-size: 24px;margin-right: 15px;color: #666666;}.form__ipt {flex: auto;border: none;font-size: 16px;height: 50px;}.form__yzm {border-left: 1px solid #c1c1c1;display: flex;align-items: center;height: 24px;padding-left: 20px;word-break: keep-all;color: #666666;}.form__bottom {margin-top: 30px;padding: 20px 0;}.form__btn {height: 0.5rem;width: 100%;background: #53B1FE;display: flex;align-items: center;justify-content: center;border: none;color: #ffffff;border-radius: 50px;font-size: 18px;}.form__btn--grey {background-color: #F5F5F5 !important;color: #ABABAB;}.form__read {display: flex;justify-content: center;align-items: center;margin-top: 20px;font-size: 14px;color: #666666;}}}
</style>

三、效果

微信公众号-授权登录相关推荐

微信公众号授权登录（asp.net + angular）
微信是时下最火的,上面有数以亿计的用户,如果能接入微信将大大减低注册门槛,当然,接入微信登录是有门槛的.微信登录一般有两个,一个是微信开放平台授权登录,一个是微信公众号授权登录,两者都需要认证才可以继 ...
vue移动端项目微信公众号授权登录
前言在我们做移动端项目时, 很多功能是以登录后才能进行后续的操作, 并且许多pc端的网页都有微信扫码登录功能, 为了做到pc与移动端统一, 往往移动端项目需要添加微信登录功能, 那么为什么手机端不能 ...
Java在Web端微信公众号授权登录
Java在Web端微信公众号授权登录 1.需要在微信开发平台配置 url:是自己服务中的微信需要推给你的地址(需要使用二级域名,可以去添加链接描述)购买9块钱1个月使用权或者白嫖都可 token 这个 ...
H5 微信公众号授权登录前后端分离篇(资料准备+前端01)
实现微信公众号授权登录,很简单,但是注意的地方要细心,小伙伴们跟着我的思路一起实现吧! 文章目录一.帐号申请 1. 正式账号 2. 测试帐号二.微信文档 2.1. 文档主页 2.2. 授权流程 2 ...
【SpringBoot学习】46、SpringBoot 集成 Uniapp 实现微信公众号授权登录
文章目录一.公众号环境搭建二.Spring Boot 集成微信公众号 1.application.yml 微信配置 2.控制层接口三.Uniapp 实现授权登录一.公众号环境搭建本篇文章使用 ...
uni-app 对FastAdmin微信公众号授权登录实例
uni-app 对FastAdmin微信公众号授权登录实例 uniapp 微信公众号授权登录代码跳转获取code 提交fastadmin 第三方登录插件进行登录验证存储token onLoad( ...
RuoYi-App移动版（uni-app）微信公众号授权登录
前言略 uni-app 未提供微信公众号授权登录 uni.login是一个客户端API,统一封装了各个平台的各种常见的登录方式,包括App手机号一键登陆.三方登录(微信.微博.QQ.Apple.go ...
Spring boot 项目（十三）——实现微信公众号授权登录获取用户信息
引言微信公众号开发中,必不可少的一环:公众号授权登录.获取微信用户信息前期准备内网渗透=>生成本地指定端口映射的外网域名链接:内网渗透工具natapp使用详解域名生成之后修改yml文件 ...
基于Spring Boo微信公众号授权登录获取用户信息（附带完整源码）
简介微信公众号开发中,必不少可少的一环:公众号授权登录.获取微信用户信息. 本地完整运行环境准备内网渗透=>生成本地指定端口映射的外网域名传送门:内网渗透工具Natapp使用详解域名生成 ...
uniapp微信公众号授权登录，本地调试
在项目如何集中微信公众号授权登录后端跳转获取code码,最后拼接, //保留登录前的页面参数.为了不让参数传到后台,并且在微信授权链接带来带去,可以将参数和登录前的地址存到本地缓存let route ...

微信公众号-授权登录

核心要点

一、公众号配置

二、授权获取code

三、效果

微信公众号-授权登录相关推荐

最新文章

热门文章