代码编织梦想

上篇我们介绍了怎么申请账号以及最后拿到appId和appSecret,如果有不清楚的可以看一下

如果需要测试实现效果可以点击链接进行体验

微信在线答题抽奖、考试系统、答题小程序轻松制作平台-应奇H5应奇H5可以轻松制作基于微信公众平台的各种微信答题系统,在线考试系统,微信答题抽奖或微信红包活动,知识竞赛,闯关答题,直播答题等互动。操作简便好用,性价比高。可用于企业内部员工微信考试,公众号及会议、年会现场互动答题。https://www.yingqih5.com/

PC网站实现微信扫码登录功能(一)

下面我就来说一下怎样在PC端怎么实现扫码登录功能。

一、进入官方文档网站

准备工作 | 微信开放文档

其实官网对过程描述的已经非常细致了。并且提供了两种扫码方式。一种是跳转二维码扫描页面,另一种是内嵌式二维码。大家可以根据需要自行选择。我这边选择的是内嵌式二维码,我就以这种方式来说明。

实现微信扫码登录主要就是下面三步:

1. 第三方发起微信授权登录请求,微信用户允许授权第三方应用后,微信会拉起应用或重定向到第三方网站,并且带上授权临时票据code参数;
2. 通过code参数加上AppID和AppSecret等,通过API换取access_token;
3. 通过access_token进行接口调用,获取用户基本数据资源或帮助用户实现基本操作。

下面我们来一步步完成。

 二、发起请求获取扫描二维码

1.首先在页面引入http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js,如果网站支持https那就把前缀改为https

2.在需要使用微信登录的地方实例以下JS对象:

var obj = new WxLogin({
 self_redirect:true,
 id:"login_container", 
 appid: "", 
 scope: "", 
 redirect_uri: "",
 state: "",
 style: "",
 href: ""
 });

参数说明

参数是否必须说明
self_redirecttrue:手机点击确认登录后可以在 iframe 内跳转到 redirect_uri,false:手机点击确认登录后可以在 top window 跳转到 redirect_uri。默认为 false。
id第三方页面显示二维码的容器id
appid应用唯一标识,在微信开放平台提交应用审核通过后获得
scope应用授权作用域,拥有多个作用域用逗号(,)分隔,网页应用目前仅填写snsapi_login即可
redirect_uri重定向地址,需要进行UrlEncode
state用于保持请求和回调的状态,授权请求后原样带回给第三方。该参数可用于防止csrf攻击(跨站请求伪造攻击),建议第三方带上该参数,可设置为简单的随机数加session进行校验
style提供"black"、"white"可选,默认为黑色文字描述。详见文档底部FAQ
href自定义样式链接,第三方可根据实际需求覆盖默认样式。详见文档底部FAQ

在页面内定义一个div来显示二维码,这个id要传入创建二维码的方法,下面这个方法接收的ID就是容器的ID。


 

 OK,这样我们就能实现效果了,下面来看一下实际效果

 扫码以后就会跳转到我们定义的回调域名(必须要外网能访问到,如果自己没有域名就内网穿透获取一个自己的域名,不过最好自己购买一个域名,毕竟是开发每个域名哪能说得过去)

扫码以后跳转页面路径如下:

 可以看到我们已经拿到了code了

三、通过code获取微信用户信息

调用微信提供的API,通过code来获取微信用户openId信息

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

参数说明

参数是否必须说明
appid应用唯一标识,在微信开放平台提交应用审核通过后获得
secret应用密钥AppSecret,在微信开放平台提交应用审核通过后获得
code填写第一步获取的code参数
grant_type填authorization_code

返回说明

正确的返回:

{ 
"access_token":"ACCESS_TOKEN", 
"expires_in":7200, 
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID", 
"scope":"SCOPE",
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

参数说明

参数说明
access_token接口调用凭证
expires_inaccess_token接口调用凭证超时时间,单位(秒)
refresh_token用户刷新access_token
openid授权用户唯一标识
scope用户授权的作用域,使用逗号(,)分隔
unionid当且仅当该网站应用已获得该用户的userinfo授权时,才会出现该字段。

错误返回样例:

{"errcode":40029,"errmsg":"invalid code"}

 四、后端实现代码:

1.引入工具类Jar包

<!--hutool-->
<dependency>
  <groupId>cn.hutool</groupId>
  <artifactId>hutool-all</artifactId>
  <version>5.3.10</version>
</dependency>
<!--fastjson -->
<dependency>
  <groupId>com.alibaba</groupId>
  <artifactId>fastjson</artifactId>
  <version>1.2.75</version>
</dependency>

2.获取微信用户信息工具类 

package com.xingli.springlearningdemo.weChat;

import cn.hutool.core.util.ArrayUtil;
import cn.hutool.core.util.StrUtil;
import cn.hutool.http.HttpUtil;
import cn.hutool.json.JSONUtil;

import java.util.Map;

/**
 * description: WeChatUtils 微信获取用户工具类<br>
 *
 * @date: 2021/8/19 0019 上午 10:05 <br>
 * @author: William <br>
 * version: 1.0 <br>
 */
public class WeChatUtils {

    /**
     * 获取微信accessToken路径
     */
    private static final String GET_ACCESS_TOKEN_URL = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code";

    /**
     * 微信appId
     */
    private static final String APP_ID = "XXXX";

    /**
     * 微信appSecret
     */
    private static final String APP_SECRET = "XXXXXX";


    /**
     * description: getAccessToken  根据code获取accessToken<br>
     * version: 1.0 <br>
     * @date: 2021/8/19 0019 上午 10:10 <br>
     * @author: William <br>
     * @param code   微信用户授权code
     * @return java.util.Map<java.lang.String,java.lang.String>
     */
    public static Map<String,String> getAccessToken(String code){
        return getAccessToken(code,APP_ID,APP_SECRET);
    }

    /**
     * description: getAccessToken 根据code获取微信用户信息,返回map如果正确map包含access_token ,如果错误则包含:errcode<br>
     * version: 1.0 <br>
     * @date: 2021/8/19 0019 上午 10:11 <br>
     * @author: William <br>
     * @param code       微信授权code
     * @param appId      微信appId
     * @param appSecret  微信appSecret
     * @return java.util.Map<java.lang.String,java.lang.String>
     */
    public static Map<String,String> getAccessToken(String code,String appId,String appSecret){
        //判断所有字段不能为空
        if(isAnyBlank(code,appId,appSecret)){
            throw new IllegalArgumentException("参数错误");
        }
        String requestUrl = GET_ACCESS_TOKEN_URL.replace("APPID",appId)
                .replace("SECRET",appSecret).replace("CODE",code);
        String result = HttpUtil.get(requestUrl);
        return JsonUtils.parseMap(result, String.class, String.class);
    }

    /**
     * description: isAnyBlank 判断是否存在空字符串,Hutool未编写<br>
     * version: 1.0 <br>
     * @date: 2021/8/19 0019 上午 10:25 <br>
     * @author: William <br>
     * @param strs   字符串
     * @return java.lang.Boolean
     */
    public static Boolean isAnyBlank(CharSequence... strs){
        //如果为空直接返回true
        if (ArrayUtil.isEmpty(strs)) {
            return true;
        }
        for (CharSequence str : strs) {
            if (StrUtil.isBlank(str)) {
                return true;
            }
        }
        return false;
    }

}

3.引用工具类

package com.xingli.springlearningdemo.weChat;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import java.io.IOException;
import java.util.List;
import java.util.Map;

/**
 * description: json工具类 <br>
 * version: 1.0 <br>
 * @date: 2019/7/20 0019 上午 10:17 <br>
 * @author: William <br>
 */
public class JsonUtils {

    public static final ObjectMapper MAPPER = new ObjectMapper();

    private static final Logger logger = LoggerFactory.getLogger(JsonUtils.class);

    public static String serialize(Object obj) {
        if (obj == null) {
            return null;
        }
        if (obj.getClass() == String.class) {
            return (String) obj;
        }
        try {
            return MAPPER.writeValueAsString(obj);
        } catch (JsonProcessingException e) {
            logger.error("json序列化出错:" + obj, e);
            return null;
        }
    }

    public static <T> T parse(String json, Class<T> tClass) {
        try {
            return MAPPER.readValue(json, tClass);
        } catch (IOException e) {
            logger.error("json解析出错:" + json, e);
            return null;
        }
    }

    public static <E> List<E> parseList(String json, Class<E> eClass) {
        try {
            return MAPPER.readValue(json, MAPPER.getTypeFactory().constructCollectionType(List.class, eClass));
        } catch (IOException e) {
            logger.error("json解析出错:" + json, e);
            return null;
        }
    }

    public static <K, V> Map<K, V> parseMap(String json, Class<K> kClass, Class<V> vClass) {
        try {
            return MAPPER.readValue(json, MAPPER.getTypeFactory().constructMapType(Map.class, kClass, vClass));
        } catch (IOException e) {
            logger.error("json解析出错:" + json, e);
            return null;
        }
    }

    public static <T> T nativeRead(String json, TypeReference<T> type) {
        try {
            return MAPPER.readValue(json, type);
        } catch (IOException e) {
            logger.error("json解析出错:" + json, e);
            return null;
        }
    }

}

 通过上面的工具类的getAccessToken方法我们就能拿到openId了,然后去数据库中查询是否有该openId用户,如果有就登录,没有就注册登录。

OK,到这里PC端实现微信登录功能就完成了。

欢迎添加微信一起学习、交流共同进步

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_35771266/article/details/119794542

微信扫码登录网页实现原理_iteye_5904的博客-爱代码爱编程

扫码登录操作过程 浏览器输入:https://wx.qq.com/?lang=zh_CN 手机登录微信,利用“扫一扫”功能扫描网页上的二维码手机扫描成功后,提示“登录网页版微信”;网页上显示“成功扫描 请在手机点击确认以登录”手机端点击“登录网页版微信”,网页跳转到用户的微信操作界面 整个扫码登录的操作过程还是挺简单的,而且交互地实时性比较好,

网站接入微信扫码登录并获取用户基本信息(微信开放平台)-爱代码爱编程

现在的网站基本都接入微信登陆了,就好像下面这样的。 只需要用微信扫一下二维码,这个网站就可以展示你的微信昵称和头像,免去注册账号和输入密码登录的步骤,还免去设置头像和昵称的步骤,所以是挺方便的。 那么如何把自己的网站接入这个呢?首先咱们得先在微信开放平台注册账号并且创建一个网站应用,等待审核通过后就可以获得Appid和AppSecret

java实现pc网站实现微信扫码登陆-爱代码爱编程

近期,开发一个项目要求PC网站可以进行扫码登陆。 1.前期工作 需要先在微信开放平台进行注册(https://open.weixin.qq.com/),并认证一个网站应用。 点击查看按钮,我们需要记录一下AppID,AppSercret的值,尤其第一次登陆的话生成好的AppSercret值一定要保存好。 这个接口主要用来就是登陆的,我们可以看到

微信扫码登陆(1)---扫码登录流程讲解、获取授权登陆二维码_后端元宇宙的博客-爱代码爱编程_扫码登录

扫码登录流程讲解、获取授权登陆二维码 具体流程可以看微信官网的扫码登录文档 地址:准备工作 | 微信开放文档 其实官方文档已经讲的非常清楚而且讲的也很明白。 一、扫码登录流程讲解 1、首先准备工作 网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。 在进行微信OAuth2.在进行微信OAuth2.0授权登录

微信扫码登录网站实现案例(无需授权)_小诸葛的博客的博客-爱代码爱编程

前言       最近因业务需要,需要给网站增加一个扫描公众号二维码登录网站的功能,通过扫码登录,一来用户登录网站不需再输入账号密码,提升了用户体验,二来也可以作为公众号吸粉的一个渠道。 开发准备       实现微信扫码登录需要一个认证的服务号,因为实现这个功能需要调用微信提供的接口生成一个带参的公众号二维码,而这个带参二维码生成接口只有认证的服务

pc端网页实现微信扫码登录-爱代码爱编程

微信开发文档:https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html 点击按钮,跳转到微信授权页面,会出现一个二维码。 //拉取授权页面 let APPID = '网页应用的appid' let REDIRECT_URI = en

通过微信扫码登录网站流程-爱代码爱编程

通过微信扫码登录网站 微信开放平台文档地址:https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Authorized_Interface_Calling_UnionID.html 步骤: 一、在管理中心中创建应用,填写信息并等待审核完成。 二、获取到app中

内网环境下微信扫码登录小结-爱代码爱编程

一、需求: 网站需要接入微信扫码登录,但此网站仅能在内网环境下访问,仅网站服务器可以连接微信外网 二、遇到的问题: 1、图片需要联网: 参考网页:微信网页扫码登录 按照上述网站上的指南接入,在可访问外网的情况下可以使用,但是由于二维码的图片是需要浏览器从微信的服务器中获取的,在内网情况下无法拿到图片 解决方案:可以将二维码图片爬取过来,放入登录

PC微信扫码登录教程-爱代码爱编程

PC微信扫码登录教程 来源:小白 时间:2020年12月22日15:33:21 需要微信开放平台账号 难度:一般 1.创建网站应用 获取AppID和AppSecret 1.1基本信息 选择创建网站应用,没什么可说的 根据以下步骤配置内容 注意图片尺寸跟网站应用尺寸 这里的图片为一个大logo 一个小logo

vue 实现PC端微信扫码登录(二维码内嵌网页版)-爱代码爱编程

1.先在index.html中引入js文件 <script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script> ** 2.在需要的页面进行实例化(本项目是在登录页进行扫码) 键值说明: Id: 是存放二维码的容器, ap

PC网站实现微信扫码登录功能(一)-爱代码爱编程

现在微信的使用用户越来越多,如果网站添加上微信登录,就能节省很多用户注册时间,极大缩小了注册流程。会让用户觉得特别方便。接下来我们就说一下怎么来实现PC端微信扫码登录。 如果需要测试实现效果,可以点击链接测试:微信在线答题抽奖、考试系统、答题小程序轻松制作平台-应奇H5应奇H5可以轻松制作基于微信公众平台的各种微信答题系统,在线考试系统,微信答题抽奖或微