AI 助理
备案控制台
开发者社区 大数据 文章 正文

PC 微信扫码登陆

2017-02-12 1737
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
.cn 域名，1个 12个月
简介： 1、注册微信开发平台官网网址 自行注册，需要注意的是注册邮箱号不用与腾讯其他产品同号。2、微信开发平台添加网站应用 以上资料提交之后等待TX审核，审核时间大概2天左右，审核通过之后就可以查看AppID AppSecret以及申请微信登录。
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支付
一张二维码集成微信、支付宝支付

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

文章标签：
域名
开发者
数据格式
JSON
关键词：
微信登陆
pc微信
微信pc
微信扫码登陆
微信扫码
javen205
目录
相关文章
草料二维码
|
3月前
详细教程：扫码提交表单后，数据直接推送到企业微信、钉钉、飞书群聊
在草料制作的表单中，填表人扫码填写并提交数据后，这些信息可以立即通过企业微信、钉钉或飞书自动推送到相应的群聊中，实现即时共享和沟通，提升团队协作效率。
草料二维码
89 2
如夜了我衣衫太薄便归家靠路灯
|
4月前
|
Python
PC端扫码实现微信支付
PC端扫码实现微信支付
如夜了我衣衫太薄便归家靠路灯
119 0
G佳伟
|
5月前
|
缓存 前端开发 PHP
【超详细】php实现扫码关注微信公众号系统/网站自动注册登录
【超详细】php实现扫码关注微信公众号系统/网站自动注册登录
G佳伟
324 0
疯狂的猿
|
5月前
仿美团饿了么程序,外卖人9.0外卖订餐源码（PC+微信）
仿美团饿了么程序,外卖人9.0商业版外卖订餐源码,PC+微信+WAP+短信宝,多城市多色版 非常不错的独立版外卖跑腿网站源码，喜欢的可以下载调试看看吧！！
疯狂的猿
69 0
weixin_836869520
|
6月前
|
XML API 数据格式
微信PC版的API接口
微信PC版的API接口
weixin_836869520
403 0
石宗昊
|
6月前
微信登陆报错：redirect_uri域名与后台配置不一致,错误码:10003 微信支付报错 微信登录报错 微信开发
微信登陆报错：redirect_uri域名与后台配置不一致,错误码:10003 微信支付报错 微信登录报错 微信开发
石宗昊
97 0
周盛欢
|
7月前
|
小程序
微信小程序用户登陆和获取用户信息功能实现
微信小程序用户登陆和获取用户信息功能实现
周盛欢
139 0
风水道人
|
7月前
|
前端开发 NoSQL 数据库
如何设计 QQ、微信、微博、Github 等等，第三方账号登陆 ？（附表设计）
如何设计 QQ、微信、微博、Github 等等，第三方账号登陆 ？（附表设计）
风水道人
75 1
风水道人
|
7月前
|
前端开发 NoSQL 数据库
设计 QQ、微信等第三方账号登陆
设计 QQ、微信等第三方账号登陆
风水道人
69 0
设计 QQ、微信等第三方账号登陆
小趴菜111.
|
7月前
实现微信扫码登陆
实现微信扫码登陆
小趴菜111.
50 0

热门文章

最新文章

  • 1
    POINTS 1.5：腾讯微信开源的多模态大模型，超越了业界其他的开源视觉语言模型，具备强大的视觉和语言处理能力
  • 2
    手撸了一个全自动微信清粉小工具（源码详解）
  • 3
    即时通讯技术文集（第45期）：微信、QQ技术精华合集(Part2) [共14篇]
  • 4
    通过标签清理微信好友：Python自动化脚本解析
  • 5
    微信native支付对接案例详解
  • 6
    即时通讯技术文集（第44期）：微信、QQ技术精华合集(Part1) [共14篇]
  • 7
    【java】微信小程序登录，后端流程
  • 8
    微信小程序地图定位的核心技术与实际应用详解
  • 9
    谈微信搜索SEO（搜一搜）怎么排名第一
  • 10
    Java如何实现企业微信审批流程
  • 1
    POINTS 1.5：腾讯微信开源的多模态大模型，超越了业界其他的开源视觉语言模型，具备强大的视觉和语言处理能力
    135
  • 2
    微信native支付对接案例详解
    26
  • 3
    即时通讯技术文集（第45期）：微信、QQ技术精华合集(Part2) [共14篇]
    33
  • 4
    通过标签清理微信好友：Python自动化脚本解析
    34
  • 5
    手撸了一个全自动微信清粉小工具（源码详解）
    70
  • 6
    即时通讯技术文集（第44期）：微信、QQ技术精华合集(Part1) [共14篇]
    24
  • 7
    如何在公众号里制作微信报名表
    59
  • 8
    仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
    60
  • 9
    微信小程序地图定位的核心技术与实际应用详解
    122
  • 10
    微信开发者工具里面没有企业微信模式
    46

    • 相关电子书

    更多
  • 微信广告引擎与播放节奏算法实践
  • 微信H5视频播放器在海量业务下的实践
  • 微信高效运维之路

    • 相关实验场景

    更多
  • 搭建微信小程序
  • 星轨-钉钉APP分发实训
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)