微信开发平台网站应用登录_微信开发平台网站应用填写 - CSDN
精华内容
参与话题
  • 网站应用微信登录开发指南

    千次阅读 2018-02-27 21:27:47
    准备工作 网站应用微信登录是基于OAuth2.0协议标准...在进行微信OAuth2.0授权登录接入之前,在微信开放平台注册开发者帐号,并拥有一个已审核通过的网站应用,并获得相应的AppID和AppSecret,申请微信登录且通过审...
    转载于:https://www.cnblogs.com/cymbidium/p/5091900.html
    

    准备工作

    网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。

    在进行微信OAuth2.在进行微信OAuth2.0授权登录接入之前,在微信开放平台注册开发者帐号,并拥有一个已审核通过的网站应用,并获得相应的AppID和AppSecret,申请微信登录且通过审核后,可开始接入流程。

    授权流程说明

    微信OAuth2.0授权登录让微信用户使用微信身份安全登录第三方应用或网站,在微信用户授权登录已接入微信OAuth2.0的第三方应用后,第三方可以获取到用户的接口调用凭证(access_token),通过access_token可以进行微信开放平台授权关系接口调用,从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等。

    微信OAuth2.0授权登录目前支持authorization_code模式,适用于拥有server端的应用授权。该模式整体流程为:

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

    获取access_token时序图:

    第一步:请求CODE

    第三方使用网站应用授权登录前请注意已获取相应网页授权作用域(scope=snsapi_login),则可以通过在PC端打开以下链接:
    https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

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

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

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

    redirect_uri?code=CODE&state=STATE

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

    redirect_uri?state=STATE
    请求示例

    登录一号店网站应用

    https://passport.yhd.com/wechat/login.do

    打开后,一号店会生成state参数,跳转到
    https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect

    微信用户使用微信扫描二维码并且确认登录后,PC端会跳转到

    https://passport.yhd.com/wechat/callback.do?code=CODE&state=3d6be0a4035d839573b04816624a415e

    为了满足网站更定制化的需求,我们还提供了第二种获取code的方式,支持网站将微信登录二维码内嵌到自己页面中,用户使用微信扫码授权后通过JS将code返回给网站。

    JS微信登录主要用途:网站希望用户在网站内就能完成登录,无需跳转到微信域下登录后再返回,提升微信登录的流畅性与成功率。 网站内嵌二维码微信登录JS实现办法:

    步骤1:在页面中先引入如下JS文件(支持https):
    <script src=”http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js”></script>
    步骤2:在需要使用微信登录的地方实例以下JS对象:
                              var obj = new WxLogin({
    id:"login_container",
    appid: "",
    scope: "",
    redirect_uri: "",
    state: "",
    style: "",
    href: ""
    });
    参数说明
    参数是否必须说明
    id 第三方页面显示二维码的容器id
    appid 应用唯一标识,在微信开放平台提交应用审核通过后获得
    scope 应用授权作用域,拥有多个作用域用逗号(,)分隔,网页应用目前仅填写snsapi_login即可
    redirect_uri 重定向地址,需要进行UrlEncode
    state 用于保持请求和回调的状态,授权请求后原样带回给第三方。该参数可用于防止csrf攻击(跨站请求伪造攻击),建议第三方带上该参数,可设置为简单的随机数加session进行校验
    style 提供”black”、”white”可选,默认为黑色文字描述。详见文档底部FAQ
    href 自定义样式链接,第三方可根据实际需求覆盖默认样式。详见文档底部FAQ
    第二步:通过code获取access_token

    通过code获取access_token

    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" 
    }
    参数说明
    access_token 接口调用凭证
    expires_in access_token接口调用凭证超时时间,单位(秒)
    refresh_token 用户刷新access_token
    openid 授权用户唯一标识
    scope 用户授权的作用域,使用逗号(,)分隔

    错误返回样例:

    {"errcode":40029,"errmsg":"invalid code"}
    刷新access_token有效期

    access_token是调用授权关系接口的调用凭证,由于access_token有效期(目前为2个小时)较短,当access_token超时后,可以使用refresh_token进行刷新,access_token刷新结果有两种:

    1. 1. 若access_token已超时,那么进行refresh_token会获取一个新的access_token,新的超时时间;
    2. 2. 若access_token未超时,那么进行refresh_token不会改变access_token,但超时时间会刷新,相当于续期access_token。

    refresh_token拥有较长的有效期(30天),当refresh_token失效的后,需要用户重新授权。

    请求方法

    获取第一步的code后,请求以下链接进行refresh_token:

    https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN
    参数说明
    参数是否必须说明
    appid 应用唯一标识
    grant_type 填refresh_token
    refresh_token 填写通过access_token获取到的refresh_token参数
    返回说明

    正确的返回:


    "access_token":"ACCESS_TOKEN", 
    "expires_in":7200, 
    "refresh_token":"REFRESH_TOKEN", 
    "openid":"OPENID", 
    "scope":"SCOPE" 
    }
    参数说明
    access_token 接口调用凭证
    expires_in access_token接口调用凭证超时时间,单位(秒)
    refresh_token 用户刷新access_token
    openid 授权用户唯一标识
    scope 用户授权的作用域,使用逗号(,)分隔

    错误返回样例:

    {"errcode":40030,"errmsg":"invalid refresh_token"}
    第三步:通过access_token调用接口

    获取access_token后,进行接口调用,有以下前提:

    1. 1. access_token有效且未超时;
    2. 2. 微信用户已授权给第三方应用帐号相应接口作用域(scope)。

    对于接口作用域(scope),能调用的接口有以下:

    授权作用域(scope)接口接口说明
    snsapi_base /sns/oauth2/access_token 通过code换取access_token、refresh_token和已授权scope
    /sns/oauth2/refresh_token 刷新或续期access_token使用
    /sns/auth 检查access_token有效性
    snsapi_userinfo /sns/userinfo 获取用户个人信息

    其中snsapi_base属于基础接口,若应用已拥有其它scope权限,则默认拥有snsapi_base的权限。使用snsapi_base可以让移动端网页授权绕过跳转授权登录页请求用户授权的动作,直接跳转第三方网页带上授权临时票据(code),但会使得用户已授权作用域(scope)仅为snsapi_base,从而导致无法获取到需要用户授权才允许获得的数据和基础功能。

    接口调用方法可查阅《微信授权关系接口调用指南》

    F.A.Q
    1. 什么是授权临时票据(code)?

    答:第三方通过code进行获取access_token的时候需要用到,code的超时时间为10分钟,一个code只能成功换取一次access_token即失效。code的临时性和一次保障了微信授权登录的安全性。第三方可通过使用https和state参数,进一步加强自身授权登录的安全性。

     

    2. 什么是授权作用域(scope)?

    答:授权作用域(scope)代表用户授权给第三方的接口权限,第三方应用需要向微信开放平台申请使用相应scope的权限后,使用文档所述方式让用户进行授权,经过用户授权,获取到相应access_token后方可对接口进行调用。

    3. 网站内嵌二维码微信登录JS代码中style字段作用?

    答:第三方页面颜色风格可能为浅色调或者深色调,若第三方页面为浅色背景,style字段应提供”black”值(或者不提供,black为默认值),则对应的微信登录文字样式为黑色。相关效果如下:

     

    若提供”white”值,则对应的文字描述将显示为白色,适合深色背景。相关效果如下:

     

    4.网站内嵌二维码微信登录JS代码中href字段作用?

    答:如果第三方觉得微信团队提供的默认样式与自己的页面样式不匹配,可以自己提供样式文件来覆盖默认样式。 举个例子,如第三方觉得默认二维码过大,可以提供相关css样式文件,并把链接地址填入href字段

    .impowerBox .qrcode {width: 200px;}
    .impowerBox .title {display: none;}
    .impowerBox .info {width: 200px;}
    .status_icon {display:none}
    .impowerBox .status {text-align: center;} 

    相关效果如下:

     

    展开全文
  • 在这篇微信公众平台开发教程中,我们将介绍如何使用微信开放平台接口实现移动应用微信登录的功能。 移动应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。在进行微信OAuth2.0授权登录接入之前,...

    在这篇微信公众平台开发教程中,我们将介绍如何使用微信开放平台接口实现移动应用微信登录的功能。

     

    移动应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。

    在进行微信OAuth2.0授权登录接入之前,在微信开放平台注册开发者帐号,并拥有一个已审核通过的移动应用,并获得相应的AppID和AppSecret,申请微信登录且通过审核后,可开始接入流程。

    1、目前移动应用上微信登录只提供原生的登录方式,需要用户安装微信客户端才能配合使用。

    2、对于Android应用,建议总是显示微信登录按钮,当用户手机没有安装微信客户端时,请引导用户下载安装微信客户端。

    3、对于iOS应用,考虑到iOS应用商店审核指南中的相关规定,建议开发者接入微信登录时,先检测用户手机是否已安装微信客户端(使用sdk中isWXAppInstalled函数 ),对未安装的用户隐藏微信登录按钮,只提供其他登录方式(比如手机号注册登录、游客登录等)。

    授权流程说明

    微信OAuth2.0授权登录让微信用户使用微信身份安全登录第三方应用或网站,在微信用户授权登录已接入微信OAuth2.0的第三方应用后,第三方可以获取到用户的接口调用凭证(access_token),通过access_token可以进行微信开放平台授权关系接口调用,从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等。

    微信OAuth2.0授权登录目前支持authorization_code模式,适用于拥有server端的应用授权。该模式整体流程为:

    1. 第三方发起微信授权登录请求,微信用户允许授权第三方应用后,微信会拉起应用或重定向到第三方网站,并且带上授权临时票据code参数;

    2. 通过code参数加上AppID和AppSecret等,通过API换取access_token;

    3. 通过access_token进行接口调用,获取用户基本数据资源或帮助用户实现基本操作。

    获取access_token时序图:

     

    第一步:请求CODE
    移动应用微信授权登录

    开发者需要配合使用微信开放平台提供的SDK进行授权登录请求接入。正确接入SDK后并拥有相关授权域(scope,什么是授权域?)权限后,开发者移动应用会在终端本地拉起微信应用进行授权登录,微信用户确认后微信将拉起开发者移动应用,并带上授权临时票据(code)。

    iOS平台应用授权登录接入代码示例(请参考iOS接入指南):

    -(void)sendAuthRequest
    { 
        //构造SendAuthReq结构体 
        SendAuthReq* req =[[[SendAuthReq alloc ] init ] autorelease ];
        req.scope = @"snsapi_userinfo" ;
        req.state = @"123" ;
        //第三方向微信终端发送一个SendAuthReq消息结构
        [WXApi sendReq:req]; 
    }

    Android平台应用授权登录接入代码示例(请参考Android接入指南):

    { 
        // send oauth request 
        Final SendAuth.Req req = new SendAuth.Req();
        req.scope = "snsapi_userinfo";
        req.state = "wechat_sdk_demo_test";
        api.sendReq(req);
    }
    参数说明
    参数是否必须说明
    appid应用唯一标识,在微信开放平台提交应用审核通过后获得
    scope应用授权作用域,如获取用户个人信息则填写snsapi_userinfo(什么是授权域?
    state用于保持请求和回调的状态,授权请求后原样带回给第三方。该参数可用于防止csrf攻击(跨站请求伪造攻击),建议第三方带上该参数,可设置为简单的随机数加session进行校验

     

    返回示例:

    appid: wxd477edab60670232
    scope: snsapi_userinfo
    state: wechat_sdk_demo

    可拉起微信打开授权登录页:

    返回说明

    用户点击授权后,微信客户端会被拉起,跳转至授权界面,用户在该界面点击允许或取消,SDK通过SendAuth的Resp返回数据给调用方。

     

    返回值说明
    ErrCodeERR_OK = 0(用户同意)
    ERR_AUTH_DENIED = -4(用户拒绝授权)
    ERR_USER_CANCEL = -2(用户取消)
    code用户换取access_token的code,仅在ErrCode为0时有效
    state第三方程序发送时用来标识其请求的唯一性的标志,由第三方程序调用sendReq时传入,由微信终端回传,state字符串长度不能超过1K
    lang微信客户端当前语言
    country微信用户当前国家信息
    第二步:通过code获取access_token

    获取第一步的code后,请求以下链接获取access_token:

    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": "OezXcEiiBSKSxW0eoylIeOZ0dfxvb93UyrFdwznvwUv3JkVNVV1yFvQQa3IfuyMi4iZGDsAfe81sCaUXxyKrI-5XgCvhAS02eAC4MF2fJFl80Y9s-0h1EsuBmIVKgu0GnKhxCQ0M8G-gkQAJpzLzmQ",
        "expires_in": 7200,
        "refresh_token": "OezXcEiiBSKSxW0eoylIeOZ0dfxvb93UyrFdwznvwUv3JkVNVV1yFvQQa3IfuyMiH7dCabGFyMRtZHnHPHuEK78cf1eISYJ4y453T8pDa2tFAIJu8bFeLMBpeFSv9dgnGrK-ZfRxHzhq7IW4qevEMQ",
        "openid": "oH9d2v7NmDhsFzICG63UPSIOgUcY",
        "scope": "snsapi_userinfo",
        "unionid": "o4wcnwx0BVC4F_hSl5qCd5rC4Jps"
    }

    参数说明

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

     

    获取用户个人信息(UnionID机制)
    接口说明

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

    请求说明

    http请求方式: GET

    https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID

    参数说明
    参数是否必须说明
    access_token调用凭证
    openid普通用户的标识,对当前开发者帐号唯一
      lang  否国家地区语言版本,zh_CN 简体,zh_TW 繁体,en 英语,默认为zh-CN
    {
        "openid": "oH9d2v7NmDhsFzICG63UPSIOgUcY",
        "nickname": "方倍",
        "sex": 0,
        "language": "zh_CN",
        "city": "",
        "province": "",
        "country": "CN",
        "headimgurl": "http://wx.qlogo.cn/mmopen/pburdzLK7PUTcFw3ozK52Gravkznno51DSjnqnzsG6WzJLUOtadGBYYSVqh5YDicdawxrD6hHoR96OcyyDWAEgA/0",
        "privilege": [],
        "unionid": "o4wcnwx0BVC4F_hSl5qCd5rC4Jps"
    }

    参数说明

    参数说明
    openid普通用户的标识,对当前开发者帐号唯一
    nickname普通用户昵称
    sex普通用户性别,1为男性,2为女性
    province普通用户个人资料填写的省份
    city普通用户个人资料填写的城市
    country国家,如中国为CN
    headimgurl用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空
    privilege用户特权信息,json数组,如微信沃卡用户为(chinaunicom)
    unionid用户统一标识。针对一个微信开放平台帐号下的应用,同一用户的unionid是唯一的。

     

     

    完整PHP SDK

    class class_app
    {
        var $appid = APPID;
        var $appsecret = APPSECRET;
    
        //构造函数
        public function __construct($appid = NULL, $appsecret = NULL)
        {
            if($appid && $appsecret){
                $this->appid = $appid;
                $this->appsecret = $appsecret;
            }
        }
    
        //通过code获取access_token
        public function oauth2_access_token($code)
        {
            $url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=".$this->appid."&secret=".$this->appsecret."&code=".$code."&grant_type=authorization_code";
            $res = $this->http_request($url);
            return json_decode($res, true);
        }
    
        //获取用户个人信息(UnionID机制)
        public function oauth2_get_user_info($access_token, $openid)
        {
            $url = "https://api.weixin.qq.com/sns/userinfo?access_token=".$access_token."&openid=".$openid."&lang=zh_CN";
            $res = $this->http_request($url);
            return json_decode($res, true);
        }
    
        //HTTP请求(支持HTTP/HTTPS,支持GET/POST)
        protected function http_request($url, $data = null)
        {
            $curl = curl_init();
            curl_setopt($curl, CURLOPT_URL, $url);
            curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
            curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
            if (!empty($data)){
                curl_setopt($curl, CURLOPT_POST, 1);
                curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
            }
            curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);
            $output = curl_exec($curl);
            curl_close($curl);
            return $output;
        }
    
        //日志记录
        private function logger($log_content)
        {
            if(isset($_SERVER['HTTP_APPNAME'])){   //SAE
                sae_set_display_errors(false);
                sae_debug($log_content);
                sae_set_display_errors(true);
            }else if($_SERVER['REMOTE_ADDR'] != "127.0.0.1"){ //LOCAL
                $max_size = 500000;
                $log_filename = "log.xml";
                if(file_exists($log_filename) and (abs(filesize($log_filename)) > $max_size)){unlink($log_filename);}
                file_put_contents($log_filename, date('Y-m-d H:i:s').$log_content."\r\n", FILE_APPEND);
            }
        }
    }

    调用方法

    /*
        方倍工作室 http://www.fangbei.org/
        CopyRight 2014 All Rights Reserved
        微信开放平台 移动应用 (微信登录)
    */
    header("Content-type: text/html; charset=utf-8");
    
    
    define('APPID',            "wx3f05f4b79761d123");
    define('APPSECRET',        "9acc222b92afb29cff90b9bcfc7d6080");
    
    $code = "041359a1b393c92a5a509ce24e2ef50f";
    
    
    $weixin = new class_app();
    var_dump($weixin);
    
    //传入授权临时票据(code)
    $oauth2_info = $weixin->oauth2_access_token($code);
    var_dump($oauth2_info);
    
    $result = $weixin->oauth2_get_user_info($oauth2_info['access_token'], $oauth2_info['openid']);
    var_dump($result);

     

     

    展开全文
  • 微信开放平台网站应用-微信登录

    千次阅读 2019-10-16 17:14:00
    1.首先申请微信开放平台网站应用: 前期需要认证开发者资质,这里就不介绍了,因为是公司已有的; 然后在管理中心-网站应用-创建网站应用: 有几个点需要注意下: 1.域名是需要有备案的域名,而且,必须是以...

    新增一个商户系统,需要商户微信扫码登录,躺过了无数的坑,在此记录下:

    1.首先申请微信开放平台的网站应用:

    前期需要认证开发者资质,这里就不介绍了,因为是公司已有的;

    然后在管理中心-网站应用-创建网站应用:

    有几个点需要注意下:

    1.域名是需要有备案的域名,而且,必须是以企业备案的网站才可以,这里我遇到的坑是,我们域名虽然备案了,但是是个人的,咨询了阿里云客服,个人备案转企业备案是很麻烦的,首先注销给人备案,然后用企业去重新备案这个域名,这期间网站是不允许访问的,否则备案通不过,很坑;我的解决办法是,找了个公司已经备案的域名去申请的。

    再提一句,如果个人阿里云账号备案系统下,有多个网站域名,可以注销其中一个网站,但是需要用别的企业阿里云账号去重新备案这个注销掉的网站;否则改个人备案系统里的主体信息,其他网站也就访问不了了。

    2.授权回调域可以跟公司官网不一致的。不可以带http://或https://,直接写www.aaa.com就行。网址后边是可以带端口号的(我们网站下是根据端口号区分哪个系统,80默认官网,其他的代表不一样的系统,所以授权回调域必须要带上端口号,否则后期会报redirect_uri参数错误,这也是个大坑;当然,如果没有端口号区分系统,可以忽略这里)

    3.登记表里面的官网也是不需要写http协议的,直接网址就行。

    创建完应用以后就可以审核了,一般两天就有结果。

    审核通过以后,就可以获取到appid和secret了;

    有了这两个参数,就可以实现扫码登录的各个接口啦。

    具体的代码,推荐一个博主的视频吧,可以百度搜索java1234,晓锋,或者关注java1234微信公众号 回复 微信扫码登录, 就行啦,有源码也有视频,我就偷个懒,不贴代码了。

    展开全文
  • 关键字:微信公众平台 微信开放平台 微信登录 微信扫码登录 使用微信账号登录网站 作者:方倍工作室  原文:http://www.cnblogs.com/txw1958/p/weixin-qrlogin.html    在这篇微信公众平台开发教程中,我们将...

    关键字:微信公众平台 微信开放平台 微信登录 微信扫码登录 使用微信账号登录网站
    作者:方倍工作室 
    原文:http://www.cnblogs.com/txw1958/p/weixin-qrlogin.html  

     

    在这篇微信公众平台开发教程中,我们将介绍如何使用微信开放平台接口实现微信扫码登录的功能。

     

    准备工作

    网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。

    在进行微信OAuth2.在进行微信OAuth2.0授权登录接入之前,在微信开放平台注册开发者帐号,并拥有一个已审核通过的网站应用,并获得相应的AppID和AppSecret,申请微信登录且通过审核后,可开始接入流程。

    授权流程说明

    微信OAuth2.0授权登录让微信用户使用微信身份安全登录第三方应用或网站,在微信用户授权登录已接入微信OAuth2.0的第三方应用后,第三方可以获取到用户的接口调用凭证(access_token),通过access_token可以进行微信开放平台授权关系接口调用,从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等。

    微信OAuth2.0授权登录目前支持authorization_code模式,适用于拥有server端的应用授权。该模式整体流程为:

    1. 1. 第三方发起微信授权登录请求,微信用户允许授权第三方应用后,微信会拉起应用或重定向到第三方网站,并且带上授权临时票据code参数;

    2. 2. 通过code参数加上AppID和AppSecret等,通过API换取access_token;

    3. 3. 通过access_token进行接口调用,获取用户基本数据资源或帮助用户实现基本操作。

    获取access_token时序图:

    第一步:请求CODE

    登录方倍工作室微信登录网站应用

    http://weixin.fangbei.org/login.php

    打开后,应用会生成state参数,跳转到以下链接:(登录前请注意已获取相应网页授权作用域(scope=snsapi_login))

    https://open.weixin.qq.com/connect/qrconnect?appid=wxed782be999f86e0e&redirect_uri=http%3A%2F%2Fweixin.fangbei.org%2Flogin.php&response_type=code&scope=snsapi_login&state=123#wechat_redirect

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

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

    此时,PC网站上显示如下二维码

     

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

    http://weixin.fangbei.org/login.php?code=0317a2c31ccd5eadf1a7a8fffd4a7dbf&state=123

    为了满足网站更定制化的需求,我们还提供了第二种获取code的方式,支持网站将微信登录二维码内嵌到自己页面中,用户使用微信扫码授权后通过JS将code返回给网站。

    JS微信登录主要用途:网站希望用户在网站内就能完成登录,无需跳转到微信域下登录后再返回,提升微信登录的流畅性与成功率。 网站内嵌二维码微信登录JS实现办法:

    步骤1:在页面中先引入如下JS文件(支持https):
    <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
    步骤2:在需要使用微信登录的地方实例以下JS对象:
    复制代码
            <script>
                var obj = new WxLogin({
                  id: "login_container",
                  appid: "wxed782be999f86e0e",
                  scope: "snsapi_login",
                  redirect_uri: encodeURIComponent("http://" + window.location.host + "/login.php"),
                  state: Math.ceil(Math.random()*1000),
                  style: "black",
                  href: ""});
            </script>
    复制代码

    参数说明

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

    完整代码如下

    复制代码
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
        </head>
        <body>
            <span id="login_container"></span>
            <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
            <script>
                var obj = new WxLogin({
                  id: "login_container",
                  appid: "wxed782be999f86e0e",
                  scope: "snsapi_login",
                  redirect_uri: encodeURIComponent("http://" + window.location.host + "/login.php"),
                  state: Math.ceil(Math.random()*1000),
                  style: "black",
                  href: ""});
            </script>
        </body>
    </html>
    复制代码

    页面显示效果如下 

     

    第二步:通过code获取access_token

    通过code获取access_token

    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": "OezXcEiiBSKSxW0eoylIeFy2HFC4Bxv9JvC0Sgj4Px4_8TX1ci3jF_QP_6sWjvx2rCAUjXEP1_9edZdJLf3MIwii2N8cnTooDfx7nYpFRmOSZyq4gb2FNdWJr__KUqPtcfVUvg6XBTucZZ4zH6v8VQ",
        "expires_in": 7200,
        "refresh_token": "OezXcEiiBSKSxW0eoylIeFy2HFC4Bxv9JvC0Sgj4Px4_8TX1ci3jF_QP_6sWjvx2lW60INlf6AK1q21rW7mJyc5yG3GZ9p1psANOKTi2EZUQXA6CnwSXxDQlJ3421tEOvCWIrJhkA8oTqjsLKYG-yg",
        "openid": "oJekJs2faTQ47FGjDOEIyOPMN97s",
        "scope": "snsapi_login",
        "unionid": "o4wcnw02YjFUYglZxV0LwcBkVF6Y"
    }
    复制代码

    参数说明

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

    错误返回样例:

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

    刷新access_token有效期

    access_token是调用授权关系接口的调用凭证,由于access_token有效期(目前为2个小时)较短,当access_token超时后,可以使用refresh_token进行刷新,access_token刷新结果有两种:

    1. 1. 若access_token已超时,那么进行refresh_token会获取一个新的access_token,新的超时时间;

    2. 2. 若access_token未超时,那么进行refresh_token不会改变access_token,但超时时间会刷新,相当于续期access_token。

    refresh_token拥有较长的有效期(30天),当refresh_token失效的后,需要用户重新授权。

    请求方法

    获取第一步的code后,请求以下链接进行refresh_token:

    https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

    参数说明
    参数 是否必须 说明
    appid 应用唯一标识
    grant_type 填refresh_token
    refresh_token 填写通过access_token获取到的refresh_token参数
    返回说明

    正确的返回:


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

    参数 说明
    access_token 接口调用凭证
    expires_in access_token接口调用凭证超时时间,单位(秒)
    refresh_token 用户刷新access_token
    openid 授权用户唯一标识
    scope 用户授权的作用域,使用逗号(,)分隔

    错误返回样例:

    {"errcode":40030,"errmsg":"invalid refresh_token"}

    注意:

    1、Appsecret 是应用接口使用密钥,泄漏后将可能导致应用数据泄漏、应用的用户数据泄漏等高风险后果;存储在客户端,极有可能被恶意窃取(如反编译获取Appsecret);

    2、access_token 为用户授权第三方应用发起接口调用的凭证(相当于用户登录态),存储在客户端,可能出现恶意获取access_token 后导致的用户数据泄漏、用户微信相关接口功能被恶意发起等行为;

    3、refresh_token 为用户授权第三方应用的长效凭证,仅用于刷新access_token,但泄漏后相当于access_token 泄漏,风险同上。

     

    建议将secret、用户数据(如access_token)放在App云端服务器,由云端中转接口调用请求。

     
    第三步:通过access_token调用接口

    获取access_token后,进行接口调用,有以下前提:

    1. 1. access_token有效且未超时;

    2. 2. 微信用户已授权给第三方应用帐号相应接口作用域(scope)。

    对于接口作用域(scope),能调用的接口有以下:

    授权作用域(scope) 接口 接口说明
    snsapi_base /sns/oauth2/access_token 通过code换取access_token、refresh_token和已授权scope
    /sns/oauth2/refresh_token 刷新或续期access_token使用
    /sns/auth 检查access_token有效性
    snsapi_userinfo /sns/userinfo 获取用户个人信息

    其中snsapi_base属于基础接口,若应用已拥有其它scope权限,则默认拥有snsapi_base的权限。使用snsapi_base可以让移动端网页授权绕过跳转授权登录页请求用户授权的动作,直接跳转第三方网页带上授权临时票据(code),但会使得用户已授权作用域(scope)仅为snsapi_base,从而导致无法获取到需要用户授权才允许获得的数据和基础功能。

    接口调用方法可查阅《微信授权关系接口调用指南》

     

    下面是获取用户个人信息,并dump出来

    复制代码
    array(10) {
      ["openid"]=>
      string(28) "oJekJs2faTQ47FGjDOEIyOPMN97s"
      ["nickname"]=>
      string(15) "方倍工作室"
      ["sex"]=>
      int(1)
      ["language"]=>
      string(5) "zh_CN"
      ["city"]=>
      string(6) "海淀"
      ["province"]=>
      string(6) "北京"
      ["country"]=>
      string(6) "中国"
      ["headimgurl"]=>
      string(139) "http://wx.qlogo.cn/mmopen/Q3auHgzwzM7zdkiaZFdM5qrwk1iaEESVjfhWVHNg22teOnfKSPpKDE0l2yfQm1hM9AeT8pO1BKElntEBZ7DxibzdteBp3H3yXESwPYUkhibNObs/0"
      ["privilege"]=>
      array(0) {
      }
      ["unionid"]=>
      string(28) "o4wcnw02YjFUYglZxV0LwcBkVF6Y"
    }
    复制代码

     

    核心代码如下

     

    F.A.Q
    1. 什么是授权临时票据(code)?

    答:第三方通过code进行获取access_token的时候需要用到,code的超时时间为10分钟,一个code只能成功换取一次access_token即失效。code的临时性和一次保障了微信授权登录的安全性。第三方可通过使用https和state参数,进一步加强自身授权登录的安全性。

    2. 什么是授权作用域(scope)?

    答:授权作用域(scope)代表用户授权给第三方的接口权限,第三方应用需要向微信开放平台申请使用相应scope的权限后,使用文档所述方式让用户进行授权,经过用户授权,获取到相应access_token后方可对接口进行调用。

    3. 网站内嵌二维码微信登录JS代码中style字段作用?

    答:第三方页面颜色风格可能为浅色调或者深色调,若第三方页面为浅色背景,style字段应提供"black"值(或者不提供,black为默认值),则对应的微信登录文字样式为黑色。相关效果如下:

     

    若提供"white"值,则对应的文字描述将显示为白色,适合深色背景。相关效果如下:

     

    4.网站内嵌二维码微信登录JS代码中href字段作用?

    答:如果第三方觉得微信团队提供的默认样式与自己的页面样式不匹配,可以自己提供样式文件来覆盖默认样式。举个例子,如第三方觉得默认二维码过大,可以提供相关css样式文件,并把链接地址填入href字段

    .impowerBox .qrcode {width: 200px;}
    .impowerBox .title {display: none;}
    .impowerBox .info {width: 200px;}
    .status_icon {display:none}
    .impowerBox .status {text-align: center;} 

    相关效果如下:

     

     

     

    服务项目 技术咨询 微信图书 微信视频 微信代码 定制开发 其他福利
    服务入口 QQ群有问必答
    查看详情
    一本书解决90%问题
    查看详情
    微信开发视频
    小程序开发视频
    免费代码

    QQ:1354386063
    营销工具
    京东优惠折扣精选
    展开全文
  • 微信开放平台开发资源”中网站...据开发者资质认证处介绍:开发者资质认证通过后,微信开放平台帐号下的应用,将获得微信登录、智能接口、第三方平台开发等高级能力。 所以在微信第三方授权登陆获取用户信息...
  • 微信开放平台Android应用签名的本质及如何获取

    万次阅读 多人点赞 2017-03-10 19:30:01
    微信开放平台创建移动应用时上图大家都遇到过,这里的应用签名是什么呢? 这里介绍说可以通过签名生成工具在已安装当前应用的手机中获取,(待会获取测试一下)我们先搞明白它是什么,这里提到了该应用签名由开发者签名...
  • 微信开放平台 和 微信公众平台 概念不同。   1、首先需要注册微信开放平台,然后获取开发者认证。审批通过之后再创建一个移动应用同样还是需要审批。通过之后就可以给这个应用添加微信授权登陆以及相应功能了...
  • 微信开发者平台应用创建

    千次阅读 2019-06-06 11:49:44
    微信开发者平台 1.移动应用的创建 (1)填写基本信息(应用的基本内容、应用的App图标等) (2)填写平台信息(应用的官网、应用平台(ios、android、wp8应用))其中要有应用签名、应用报名填写 (3)...
  • 微信开发平台,如何获取应用签名 ##第一种 1.在微信开发网站下载<a签名开发工具> 2.下载到手机上,安装应用 **3.在输入框输入包名,点击Get Signature ** 4.获取到签名 ##第二种 在cmd里找到java目录下的bin...
  • 修改微信开发平台应用签名后,本以为会立即生效,但是等了一段时间还是没有生效,一个比较好的方法就是微信重新登录下就可以了
  • 第三方网站应用微信登录开发指南

    千次阅读 2019-03-26 18:26:04
    网站应用微信登录开发指南 准备工作 网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。 在进行微信OAuth2.在进行微信OAuth2.0授权登录接入之前,在微信开放平台注册开发者帐号,并拥有一个...
  • 微信开放平台申请网站应用

    千次阅读 2020-03-27 14:53:33
    这是一篇我想严重吐槽的文章,我需要做一个微信扫码功能,我看了下文档,发现没有那么难,结果一开始我就卡壳,申请网站应用我申请了四次,我很奔溃,关键是我搞不懂的是为什么审核周期这么长,一次就是一个礼拜 ...
  • 企业微信自建应用开发初探

    千次阅读 2019-04-04 17:21:42
    企业微信是腾讯推出的一个新的办公协作平台,通过与微信一致的沟通体验,为企业员工提供最基础和最实用的...本文以该项目为例对在企业微信平台开发企业应用的特点进行了总结,重点分析了企业微信开发平台应用开发...
  • medium=referral最近在申请微信支付接口的时候遇到的坑爹问题,微信开放平台上也没什么说明,找了半天也没找到任何相关的文档,当然我创建的是IOS应用,所以可能这块资料比较少……回到正题,解决在微信开放平台创建...
  • 微信作为强大的通讯工具和社交平台,已经成了手机必不可少的应用,因此很多网站选择把微信登录网站的功能,方便微信用户注册登录和使用网站,也就是所谓的微信扫码登录应用网站。(特别提示,网站应用适用于网站应用...
  • 主要面对移动应用/网站应用开发者,为其提供微信登录、分享、支付等相关权限和服务。 微信开放平台还提供了数据统计功能,用于开发者统计接入应用登录、分享等数据情况。 接入步骤 已京东APP举例,比如京东APP...
  • 微信开放平台开发系列文章: 微信开放平台开发第三方授权登陆(一):开发前期准备 微信开放平台开发第三方授权登陆(二):PC网页端 微信开放平台开发第三方授权登陆(三):Android客户端 微信开放平台开发第...
1 2 3 4 5 ... 20
收藏数 173,462
精华内容 69,384
关键字:

微信开发平台网站应用登录