PC 微信扫码登陆

标签: 微信 微信登录 PC微信登录 授权获取用户信息
2021人阅读 评论(0) 收藏 举报
分类:
1、注册微信开发平台

官网网址 自行注册,需要注意的是注册邮箱号不用与腾讯其他产品同号。

2、微信开发平台添加网站应用

添加网站应用

填写基本信息

填写基本信息2

网站信息登记表模板

网站应用名称不能重复

添加授权回调域-可以修改

以上资料提交之后等待TX审核,审核时间大概2天左右,审核通过之后就可以查看AppID AppSecret以及申请微信登录
注意:如果注册完的开放平台之后有进行开发者认证时,审核通过之后微信登录默认是开通的,如果没有进行开发者认证点击申请开通 时会提醒进行开发者认证(如下图)

审核通过

基本信息、开发信息

提醒进行开发者认证

开发者资质认证

3、PC微信登录流程介绍

网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。进一步了解OAuth2.0—–理解OAuth2.0 官方介绍资料

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

获取access_token时序图

具体的步骤如下:

第一步:请求CODE

接口说明
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
参数说明

参数 是否必须 说明
appid 应用唯一标识
redirect_uri 重定向地址,需要进行UrlEncode
response_type 填code
scope 应用授权作用域,拥有多个作用域用逗号(,)分隔,网页应用目前仅填写snsapi_login即可
state 用于保持请求和回调的状态,授权请求后原样带回给第三方。该参数可用于防止csrf攻击(跨站请求伪造攻击),建议第三方带上该参数,可设置为简单的随机数加session进行校验

若提示“该链接无法访问”,请检查参数是否填写错误,如redirect_uri的域名与审核时填写的授权域名不一致或scope不为snsapi_login。

返回说明
用户允许授权后,将会重定向到redirect_uri的网址上,并且带上code和state参数


redirect_uri?code=CODE&state=STATE


若用户禁止授权,则重定向后不会带上code参数,仅会带上state参数


redirect_uri?state=STATE


接口封装


    private static String qrconnect_url = "https://open.weixin.qq.com/connect/qrconnect";


    /**
     * 生成网页二维码授权链接
     * @param appId 应用id
     * @param redirect_uri 回跳地址
     * @return url
     */
    public static String getQrConnectURL(String appId, String redirect_uri) {
        return getQrConnectURL(appId, redirect_uri, null);
    }

    /**
     * 生成网页二维码授权链接
     * @param appId 应用id
     * @param redirect_uri 回跳地址
     * @param state 重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节
     * @return url
     */
    public static String getQrConnectURL(String appId, String redirect_uri, String state) {
        Map<String, String> params = new HashMap<String, String>();
        params.put("appid", appId);
        params.put("response_type", "code");
        params.put("redirect_uri", redirect_uri);
        params.put("scope", "snsapi_login");
        if (StrKit.isBlank(state)) {
            params.put("state", "wx#wechat_redirect");
        } else {
            params.put("state", state.concat("#wechat_redirect"));
        }
        String para = PaymentKit.packageSign(params, false);
        return qrconnect_url + "?" + para;
    }

接口测试

1、设置AppId、APPSecret以及回调域名
2、PC访问测试。开源项目中访问地址为:

http://域名/[项目名称]/toWebOauth

设置AppId、APPSecret以及回调域名


//pc扫描登陆
public void toWebOauth(){
    String calbackUrl=PropKit.get("domain")+"/oauth/webCallBack";
    String url=SnsAccessTokenApi.getQrConnectURL(PropKit.get("webAppId"), calbackUrl,"666");
    redirect(url);
}

如果授权回调域名与开发平台中的填写不一致将会出现以下提示

回调域名与接口调用时填写的域名不一致

第二步:通过code获取access_token
第三步:通过access_token调用接口获取用户信息

第二步、第三步过程与微信公众号授权登录一样可以参考之前写的一篇文章授权获取用户信息

授权后接口调用(UnionID)

获取用户个人信息(UnionID机制)

此接口用于获取用户个人信息。开发者可通过OpenID来获取用户基本信息。特别需要注意的是,如果开发者拥有多个移动应用、网站应用和公众帐号,可通过获取用户基本信息中的unionid来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号,用户的unionid是唯一的。换句话说,同一用户,对同一个微信开放平台下的不同应用,unionid是相同的。请注意,在用户修改微信头像后,旧的微信头像URL将会失效,因此开发者应该自己在获取用户信息后,将头像图片保存下来,避免微信头像URL失效后的异常情况。

官方介绍文档

接口封装可以参考开源项目中

网页授权(公众号、PC)获取用户信息

import com.jfinal.kit.StrKit;
import com.jfinal.weixin.sdk.kit.ParaMap;
import com.jfinal.weixin.sdk.kit.PaymentKit;
import com.jfinal.weixin.sdk.utils.HttpUtils;
import com.jfinal.weixin.sdk.utils.RetryUtils;

import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.Callable;


public class SnsAccessTokenApi
{
    private static String url = "https://api.weixin.qq.com/sns/oauth2/access_token?grant_type=authorization_code";
    private static String authorize_uri = "https://open.weixin.qq.com/connect/oauth2/authorize";
    private static String qrconnect_url = "https://open.weixin.qq.com/connect/qrconnect";

    /**
     * 生成Authorize链接
     * @param appId 应用id
     * @param redirect_uri 回跳地址
     * @param snsapiBase snsapi_base(不弹出授权页面,只能拿到用户openid)snsapi_userinfo(弹出授权页面,这个可以通过 openid 拿到昵称、性别、所在地)
     * @return url
     */
    public static String getAuthorizeURL(String appId, String redirect_uri, boolean snsapiBase) {
        return getAuthorizeURL(appId, redirect_uri, null, snsapiBase);
    }

    /**
     * 生成Authorize链接
     * @param appId 应用id
     * @param redirectUri 回跳地址
     * @param state 重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节
     * @param snsapiBase snsapi_base(不弹出授权页面,只能拿到用户openid)snsapi_userinfo(弹出授权页面,这个可以通过 openid 拿到昵称、性别、所在地)
     * @return url
     */
    public static String getAuthorizeURL(String appId, String redirectUri, String state, boolean snsapiBase) {
        Map<String, String> params = new HashMap<String, String>();
        params.put("appid", appId);
        params.put("response_type", "code");
        params.put("redirect_uri", redirectUri);
        // snsapi_base(不弹出授权页面,只能拿到用户openid)
        // snsapi_userinfo(弹出授权页面,这个可以通过 openid 拿到昵称、性别、所在地)
        if (snsapiBase) {
            params.put("scope", "snsapi_base");
        } else {
            params.put("scope", "snsapi_userinfo");
        }
        if (StrKit.isBlank(state)) {
            params.put("state", "wx#wechat_redirect");
        } else {
            params.put("state", state.concat("#wechat_redirect"));
        }
        String para = PaymentKit.packageSign(params, false);
        return authorize_uri + "?" + para;
    }


    /**
     * 生成网页二维码授权链接
     * @param appId 应用id
     * @param redirect_uri 回跳地址
     * @return url
     */
    public static String getQrConnectURL(String appId, String redirect_uri) {
        return getQrConnectURL(appId, redirect_uri, null);
    }

    /**
     * 生成网页二维码授权链接
     * @param appId 应用id
     * @param redirect_uri 回跳地址
     * @param state 重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节
     * @return url
     */
    public static String getQrConnectURL(String appId, String redirect_uri, String state) {
        Map<String, String> params = new HashMap<String, String>();
        params.put("appid", appId);
        params.put("response_type", "code");
        params.put("redirect_uri", redirect_uri);
        params.put("scope", "snsapi_login");
        if (StrKit.isBlank(state)) {
            params.put("state", "wx#wechat_redirect");
        } else {
            params.put("state", state.concat("#wechat_redirect"));
        }
        String para = PaymentKit.packageSign(params, false);
        return qrconnect_url + "?" + para;
    }

    /**
     * 通过code获取access_token
     *
     * @param code   第一步获取的code参数
     * @param appId  应用唯一标识
     * @param secret 应用密钥AppSecret
     * @return SnsAccessToken
     */
    public static SnsAccessToken getSnsAccessToken(String appId, String secret, String code)
    {
        final Map<String, String> queryParas = ParaMap.create("appid", appId).put("secret", secret).put("code", code).getData();

        return RetryUtils.retryOnException(3, new Callable<SnsAccessToken>() {

            @Override
            public SnsAccessToken call() throws Exception {
                String json = HttpUtils.get(url, queryParas);
                return new SnsAccessToken(json);
            }
        });
    }
}

用户管理接口,获取用户基本信息(UnionID机制)

import com.jfinal.weixin.sdk.kit.ParaMap;
import com.jfinal.weixin.sdk.utils.HttpUtils;
import com.jfinal.weixin.sdk.utils.JsonUtils;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 用户管理 API
 * <pre>
 * https://api.weixin.qq.com/cgi-bin/user/info?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
 * </pre>
 */
public class UserApi {

    private static String getUserInfo = "https://api.weixin.qq.com/cgi-bin/user/info";
    private static String getFollowers = "https://api.weixin.qq.com/cgi-bin/user/get";
    private static String batchGetUserInfo = "https://api.weixin.qq.com/cgi-bin/user/info/batchget?access_token=";

    /**
     * 获取用户基本信息(包括UnionID机制)
     * @param openId 普通用户的标识,对当前公众号唯一
     * @return ApiResult
     */
    public static ApiResult getUserInfo(String openId) {
        ParaMap pm = ParaMap.create("access_token", AccessTokenApi.getAccessTokenStr()).put("openid", openId).put("lang", "zh_CN");
        return new ApiResult(HttpUtils.get(getUserInfo, pm.getData()));
    }

    /**
     * 获取用户列表
     * @param nextOpenid 第一个拉取的OPENID,不填默认从头开始拉取
     * @return ApiResult
     */
    public static ApiResult getFollowers(String nextOpenid) {
        ParaMap pm = ParaMap.create("access_token", AccessTokenApi.getAccessTokenStr());
        if (nextOpenid != null)
            pm.put("next_openid", nextOpenid);
        return new ApiResult(HttpUtils.get(getFollowers, pm.getData()));
    }

    /**
     * 获取用户列表
     * @return ApiResult
     */
    public static ApiResult getFollows() {
        return getFollowers(null);
    }

    /**
     * 批量获取用户基本信息, by Unas
     * @param jsonStr json字符串
     * @return ApiResult
     */
    public static ApiResult batchGetUserInfo(String jsonStr) {
        String jsonResult = HttpUtils.post(batchGetUserInfo + AccessTokenApi.getAccessTokenStr(), jsonStr);
        return new ApiResult(jsonResult);
    }

    /**
     * 批量获取用户基本信息
     * @param openIdList openid列表
     * @return ApiResult
     */
    public static ApiResult batchGetUserInfo(List<String> openIdList) {
        Map<String, List<Map<String, Object>>> userListMap = new HashMap<String, List<Map<String, Object>>>();

        List<Map<String, Object>> userList = new ArrayList<Map<String,Object>>();
        for (String openId : openIdList) {
            Map<String, Object> mapData = new HashMap<String, Object>();
            mapData.put("openid", openId);
            mapData.put("lang", "zh_CN");
            userList.add(mapData);
        }
        userListMap.put("user_list", userList);

        return batchGetUserInfo(JsonUtils.toJson(userListMap));
    }

    private static String updateRemarkUrl = "https://api.weixin.qq.com/cgi-bin/user/info/updateremark?access_token=";

    /**
     * 设置备注名
     * @param openid 用户标识
     * @param remark 新的备注名,长度必须小于30字符
     * @return {ApiResult}
     */
    public static ApiResult updateRemark(String openid, String remark) {
        String url = updateRemarkUrl + AccessTokenApi.getAccessTokenStr();

        Map<String, String> mapData = new HashMap<String, String>();
        mapData.put("openid", openid);
        mapData.put("remark", remark);
        String jsonResult = HttpUtils.post(url, JsonUtils.toJson(mapData));

        return new ApiResult(jsonResult);
    }
}

推荐阅读
Android版-微信APP支付
极速开发微信公众号之微信买单
极速开发微信公众号之公众号支付
极速开发微信公众号之扫码支付
极速开发微信公众号之刷卡支付
极速开发微信公众号之现金红包
[Android版-支付宝APP支付](http://www.jianshu.com/p/3d91248aea4b
)
支付宝Wap支付
一张二维码集成微信、支付宝支付

源码下载地址
记录学习的点滴,以此勉励不断奋斗的自己✌️✌️✌️

查看评论

微信h5支付,微信外浏览器支付实现

h5支付的资料还真叫个少,不过找到一个好的方式,按着大神的步骤去实现还真就ok了,话不多说,开始准备吧看一下官方文档还是很必要的,知道必不可少的参数是什么:https://pay.weixin.qq....
  • Goligory
  • Goligory
  • 2017-10-30 14:15:19
  • 9639

微信网页扫码登录与微信公众号授权登录的区别

最近着手开发了微信网页扫码登录和公众号授权登录收获颇丰,两者的开发很类似。以下是我个人摸索过程中发现的两者的异同: 两者都可以通过微信客户端扫码授权的方式,让第三方页面获得微信用户的一些基本信息(...
  • viqecel
  • viqecel
  • 2016-12-06 04:30:05
  • 6595

【微信第三方登录】 解决PC和移动端浏览器同为扫码登录

点击打开链接
  • Smile___you
  • Smile___you
  • 2016-12-01 09:36:48
  • 4442

微信扫码登录

1、OAuth2.0   OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用。 ...
  • han_xiaoxue
  • han_xiaoxue
  • 2017-10-11 13:13:22
  • 800

PC端扫码实现微信联合登录

一张图说明问题: 另外,分享下我用的做图软,我用的是mac,没找到好的做图软件,网上找了半天,发现了这个好用的免费在线做图软件,希望能帮助到大家免费在线做图软件...
  • sinat_31257007
  • sinat_31257007
  • 2016-01-26 22:01:32
  • 1823

微信PC端网站 微信扫码登陆

各种概念 1. 微信公众号开发平台,指的是mp.weixin.qq.com,也是公众号管理的平台,里面有一个开发者中心,开启后,才可以制作和自己网站有联系的功能,例如调用网站的用户信息等。 2. ...
  • u011628250
  • u011628250
  • 2015-10-13 17:10:14
  • 1745

微信扫码登陆过程。

研究一下,很有启发性。 我们先来回顾一下微信网页版的扫码登录过程 1. 打开微信网页版,https://wx.qq.com/ 2. 打开手机微信客户端,扫一扫 ...
  • xkzju2010
  • xkzju2010
  • 2016-07-13 11:02:35
  • 2001

微信扫码实例

  • 2017年08月15日 10:14
  • 5.94MB
  • 下载

企业微信如何实现PC端扫码登录第三方网站

1 登录企业微信 https://work.weixin.qq.com/ 创建应用 2 在应用里需要配置 工作台应用主页 (即扫码后的跳转地址) 和 企业微信授权里的授权回调域 (必须跟跳转地址是...
  • u010957293
  • u010957293
  • 2017-08-02 10:33:13
  • 4281
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 21万+
    积分: 2678
    排名: 1万+
    博客专栏
    最新评论