微信登录功能-保姆级教学

目录

一、使用组件

二、登录功能

2.1 步骤

2.2 首先找到网页权限 复制demo 代码 这里我们需要修改两个参数

三、前端代码

3.1 api 里weiXinApi.ts

3.2 api里的 index.ts

3.3 pinia.ts

3.4 My.vue 

四、后端代码

4.1 WeiXinController

4.2 Access_Token.Java

4.3 WeiXinUser.java

五、效果图

5.1 登录之前效果图

5.2 登录之后效果图

六、源代码参考

6.1 前端源代码参考

6.2 后端源代码参考


一、使用组件

vant4:https://vant-contrib.gitee.io/vant/#/zh-CN

二、登录功能

2.1 步骤

想要点击微信登录四个字 跳转到登录页面

2.2 首先找到网页权限 复制demo 代码 这里我们需要修改两个参数

 applid(唯一id)和redirect_uri(授权后重定向的回调链接地址, 请使用 urlEncode 对链接进行处理)

其中applid 注册的时候已经给我们了

 比如说我们点击微信登录想要跳转到 http:h5.a.com/my 就可以用下面的编码工具进行编码,然后放到最初的demo链接里。UrlEncode - 在线URL网址编码、解码在线URL网址编码、解码icon-default.png?t=N7T8https://www.qianbo.com.cn/Tool/Url-Encode.html

点击 微信登录

  • 注意: 前端端口 最好设置为 80 否则很可能提示 redirect_uri参数错误!!!

三、前端代码

3.1 api 里weiXinApi.ts

import http from "@/http/index";
export default {getAccessToken: {name: "获取token",url: "/api/weixin/access_token",call: async function name(params: any = {}) {return await http.get(this.url, params);},},};

3.2 api里的 index.ts


import weiXinApi from "./weiXinApi";export {weiXinApi,};

3.3 pinia.ts

import { createPinia, defineStore } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
export default pinia;const h5Store = defineStore("h5Store", {state: () => {return {//定义变量name: "微信登录",nickname:"",headimgurl:"https://img2.baidu.com/it/u=2092827811,169092614&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",openid:"",token: "",};},persist: {// 在这里进行自定义配置key: "h5Store",storage: localStorage, //将数据持久化到本地浏览器中},
});
export { h5Store };

3.4 My.vue 

<template><view class="image-container"><van-row><van-col  span="8"><van-imageroundwidth="10rem"height="10rem":src="h5_store.headimgurl"></van-image><div class="text-center"><!-- 1.微信登录获取code --><a href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd7cd618e72d4f454&redirect_uri=http%3A%2F%2Fh5.a.com%2Fmy&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect">{{h5_store.name}}</a></div></van-col span="8"></van-row></view>
</template><script lang="ts" setup>
import { ref, onMounted } from "vue";
import {useRoute}  from "vue-router"
import {weiXinApi} from "@/api/index"
// 导入pinia
import { h5Store } from "@/store/pinia";
const h5_store=h5Store();
const route=useRoute();
onMounted(() => {// 第一步:获取code const {code ,state} = route.query;console.log(code);//091qixFa1lNlgH0dPlHa1XBkP43qixFsif(code!=undefined){weiXinApi.getAccessToken.call({code:code}).then((res:any)=>{// 登录成功获取用户的信息后 将头像和openid保存到store中console.log(res);h5_store.name=res.data.nickname;h5_store.headimgurl=res.data.headimgurl;h5_store.openid=res.data.openid;})}
});
</script>
<style lang="css" scoped>
/* 在wxss文件中 */
.image-container {position: relative;left: 25%; /* 水平居中 */align-items: center; /* 垂直居中,如果需要 */width: 100%; /* 或者设定一个固定的宽度以适应屏幕 */height: auto; /* 根据实际情况调整高度 */background-color:cyan
}
.text-center {position: relative; /* 开启相对定位 */left: 50%;display: inline-block; /* 可能需要这个来确保文本块可以在一行内显示 */
}
</style>

四、后端代码

4.1 WeiXinController


package com.by.controller;import cn.hutool.core.util.StrUtil;
import cn.hutool.http.HttpUtil;
import cn.hutool.json.JSONUtil;
import com.by.model.Access_Token;
import com.by.model.WeiXinUser;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
@RequestMapping("/api/weixin")
public class WeiXinController {/*** 微信公众号注册后的appid和appsecret*/private String appID = "wxd7cd618e72d4f454";private String appsecret = "a939c776a064d8358ed66d9c68aeeded";@GetMapping("/access_token")public WeiXinUser getAccessToken(String code) {/*** 2. 通过code换取网页授权access_token*/String url = StrUtil.format("https://api.weixin.qq.com/sns/oauth2/access_token?appid={}&secret={}&code={}&grant_type=authorization_code",appID,appsecret,code);String body = HttpUtil.get(url);Access_Token access_token = JSONUtil.toBean(body, Access_Token.class);/*** 4. 获取用户信息*/url= StrUtil.format("https://api.weixin.qq.com/sns/userinfo?access_token={}&openid={}&lang=zh_CN",access_token.getAccess_token(),access_token.getOpenid());body= HttpUtil.get(url);WeiXinUser wanted_user =  JSONUtil.toBean(body, WeiXinUser.class);return wanted_user;}
}

4.2 Access_Token.Java


package com.by.model;import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;@Data
@AllArgsConstructor
@NoArgsConstructor
@Builder
public class Access_Token {/*** 获取到的凭证*/private String access_token;private int expires_in;private String refresh_token;private String openid;}

4.3 WeiXinUser.java


package com.by.model;import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;@Data
@AllArgsConstructor
@NoArgsConstructor
@Builder
public class WeiXinUser {private String openid;private String nickname;private int sex;private String province;private String city;private String country;private String headimgurl;private String privilege;private String unionid;
}

五、效果图

将头像和昵称和openid 存到pinia 中,当前端发出的请求被后端正常响应后 将图片和昵称从结果集中拿出来赋给pinia 里的头像和昵称

5.1 登录之前效果图

5.2 登录之后效果图

六、源代码参考

6.1 前端源代码参考

https://codeup.aliyun.com/62858d45487c500c27f5aab5/huang-h5-weixin.git

6.2 后端源代码参考

https://codeup.aliyun.com/62858d45487c500c27f5aab5/SpringBoot-WeiXin.git 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/618827.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1027: 舞伴问题

解法&#xff1a; #include<iostream> #include<vector> using namespace std; int main() {int n, m, k;cin >> n;vector<char> man(n);for (int i 0; i < n; i) cin >> man[i];cin >> m;vector<char> woman(m);for (int i 0…

实现 .NET 8 部署到 Docker

一、前言 本文仅针对操作系统为 CentOS 8 的环境下部署方法进行讲述。如有需要,后续将在其他文章中进行其他系统下的部署方式讲解。 二、准备工作 确保服务器已安装 docker。 可以通过命令 docker -v 进行检查,如出现下图结果则表示已安装。 代码准备 在代码项目名称上右键…

设计模式学习笔记 - 设计模式与范式 -行为型:17.中介模式:什么时候用中介模式?什么时候用观察者模式?

概述 本章学习 23 种经典设计模式中的最后一个设计模式&#xff0c;中介模式。和之前讲过的命令模式、解释器模式类似&#xff0c;中介模式也不怎么常用&#xff0c;应用场景比较特殊、有限&#xff0c;但是&#xff0c;跟它俩不同的是&#xff0c;中介模式理解起来并不难&…

Python程序设计 二维列表

教学案例九 二维列表 1. 成绩文件的读取 score.csv文件中记录了多门同学的编号、姓名和三门功课的成绩(逗号键分隔) 格式如下 编写程序&#xff0c;将文件score.csv文件中的数据放入二维列表cjlb中(注意&#xff1a;语文、数学、英语成绩要转换为数值类型) f1open("lbk…

PyQt5

Qt是基于C实现的GUI,而PyQt就是用python调用Qt. PyQt中有很多的功能模块,开发最常用的模块功能主要有3个 1) QtCore:包含核心的非GHI的功能,主要和时间,文件与文件夹,各种数据,流,URLs,进程与线程一起使用 2) QtGUi:包含窗口系统,事件处理,2D图像,基本绘画,字体和文字类 3)…

【Web】DASCTF2022.07赋能赛 题解

目录 Ez to getflag Harddisk 绝对防御 Newser Ez to getflag 进来有两个功能&#xff0c;一个查看&#xff0c;一个上传 图片查看功能可以任意文件读 upload.php <?phperror_reporting(0);session_start();require_once(class.php);$upload new Upload();$upload…

Spring ORM

Spring Data JPA 作为Spring Data 中对于关系型数据库支持的一种框架技术,属于 ORM 的一种,通过得当的使用,可以大大简化开发过程中对于数据操作的复杂度。 Java里面写的一段DB操作逻辑,是如何一步步被传递到 DB 中执行了的呢?为什么 Java 里面可以去对接不同产商的 DB 产…

架构师系列-搜索引擎ElasticSearch(六)- 映射

映射配置 在创建索引时&#xff0c;可以预先定义字段的类型&#xff08;映射类型&#xff09;及相关属性。 数据库建表的时候&#xff0c;我们DDL依据一般都会指定每个字段的存储类型&#xff0c;例如&#xff1a;varchar、int、datetime等&#xff0c;目的很明确&#xff0c;就…

个人笔记目录

目录 一、lora 微调 alpaca 笔记 二、全量微调 Llama2-7b笔记 三、Huggingface trainer 与 from_pretrained简单介绍&#xff08;笔记&#xff09; 四、vscode调试launch.json常用格式 五、huggingface generate函数简介 六、Trl: llama2-7b-hf使用QLora 4bit量化后ds zer…

安全加速SCDN带的态势感知能为网站安全带来哪些帮助

随着安全加速SCDN被越来越多的用户使用&#xff0c;很多用户都不知道安全加速SCDN的态势感知是用于做什么的&#xff0c;德迅云安全今天就带大家来了解下什么是态势感知&#xff0c;态势感知顾名思义就是对未发生的事件进行预知&#xff0c;并提前进行防范措施的布置&#xff0…

jupyter切换不同的内核(虚拟环境)(anaconda 24.1.2)

jupyter切换不同的内核&#xff08;anaconda 24.1.2&#xff09; 主要的两条命令&#xff1a; conda install ipykernel python -m ipykernel install --user --name 环境名称 anaconda的版本号 conda --version实例&#xff1a; 一、首先可以看到已经创…

如何编写易于访问的技术文档 - 最佳实践与示例

当你为项目或工具编写技术文档时&#xff0c;你会希望它易于访问。这意味着它将为全球网络上的多样化受众提供服务并可用。 网络无障碍旨在使任何人都能访问网络内容。设计师、开发人员和撰写人员有共同的无障碍最佳实践。本文将涵盖一些创建技术内容的最佳实践。 &#xff0…