+
80
-

pc端网站如何实现微信扫码一键登录?

请问pc端网站如何实现微信扫码一键登录?

网友回复

+
0
-

1、先登录微信开放平台,没有账号就申请一个,地址:https://open.weixin.qq.com/

2、点击管理工具-》创建网站应用

3、填写基本信息及网站信息

4、等待审核成功后还要绑定公众号到认证的公众号上。

5、我们来看代码怎么写,我们以php为例

<?php
class wxlogin
{
    var $appid = "sx23213123123123";
    var $appsecret = "123124324esfdsfdsf23434324234";

    //构造函数,获取Access Token
    public function __construct($appid = NULL, $appsecret = NULL) {
        //扫码登录不需要该Access Token, 语义理解需要
        //1. 本地写入,防止token过期
        $res = @file_get_contents('access_token.json');
        $result = json_decode($res, true);
        $this->expires_time = $result["expires_time"];
        $this->access_token = $result["access_token"];

        if (time() > ($this->expires_time + 3600)) {
            $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" . $this->appid . "&secret=" . $this->appsecret;
            $res = $this->http_request($url);
            $result = json_decode($res, true);
            $this->access_token = $result["access_token"];
            $this->expires_time = time();
            file_put_contents('test/access_token.json', '{"access_token": "' . $this->access_token . '", "expires_time": ' . $this->expires_time . '}');
        }
    }

    //生成扫码登录的URL,
    public function qrconnect($redirect_url, $scope, $state = NULL) {
        $url = "https://open.weixin.qq.com/connect/qrconnect?appid=" . $this->appid . "&redirect_uri=" . urlencode($redirect_url) . "&response_type=code&scope=" . $scope . "&state=" . $state . "#wechat_redirect";
        return $url;
    }

    //生成OAuth2的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);
    }

    //获取用户基本信息(OAuth2 授权的 Access Token 获取 未关注用户,Access Token为临时获取)
    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);
    }

    public function http_request($url) {
        return file_get_contents($url);
    }
}
$weixin = new wxlogin();
if (!isset($_GET["code"])) {
    $redirect_url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
    $jumpurl = $weixin->qrconnect($redirect_url, "snsapi_login", "123");
    Header("Location:$jumpurl");
} else {
    //获取token
    $oauth2_info = $weixin->oauth2_access_token($_GET["code"]);

    //获取用户信息
    $userinfo = $weixin->oauth2_get_user_info($oauth2_info['access_token'], $oauth2_info['openid']);
    //参数样式$userinfo用户信息结构
    //array(10) { ["openid"]=> string(28) "oJDSV0lWOjfXE7VXk6C4_QuiUtQY" ["nickname"]=> string(6) "俊哥" ["sex"]=> int(1) ["language"]=> string(5) "zh_CN" ["city"]=> string(6) "成都" ["province"]=> string(6) "四川" ["country"]=> string(6) "中国" ["headimgurl"]=> string(129) "http://thirdwx.qlogo.cn/mmopen/vi_32/JuV6pCO123H8xHXGe7goSW9tFy0PKLL1zSH3uVuJ9QZ9omZeZ8TjfWGdtjtOBLAs82VqriajFecBys0pGjicVBow/132" ["privilege"]=> array(0) { } ["unionid"]=> string(28) "oAnnw0ix6eEYev5w7AUR29VoS-ow" }

    //登录成功后跳转
   // header("Location:************");
}

以上代码运行后,pc网站会直接跳到微信的二维码扫码页面,类似于这样

如果用户想自己生成二维码让用户扫码,可以选择下面这种js的方式。

<!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: "werewxdxdsfsdfsfsdfsfdsfd",   
              scope: "snsapi_login",   
              redirect_uri: encodeURIComponent("http://" + window.location.host + "/login.php"),   //这个是获取code后的回调地址
              state: Math.ceil(Math.random()*1000),   
              style: "black",   
              href: ""});   
        </script>   
    </body>   
</html> 

我知道答案,我要回答