Heim > php教程 > php手册 > Hauptteil

网站添加第三方登陆(PHP版) - 赵亚飞

WBOY
Freigeben: 2016-05-20 10:19:24
Original
1216 Leute haben es durchsucht

  这两周正在写毕业设计,我做的是一个问答网站。先介绍一下这个网站:这是一个关于大学生在线问答的网站,类似知乎和百度知道,不过功能没有人家多,毕竟这个网站我一个人在做。网站部署在阿里云,网站包括API,Web,IOS,三大模块,现在没有找到人帮忙写安卓,唉...  网站API已经写完了,Web端正在完善开发中,毕业答辩之前会吧基本功能上线,小伙伴们可以访问看看增加人气,不过没有写完,并且看着不咋好看,因为没人写前端,我又不擅长写页面所以有点低端。域名是:http://www.olas.cn

  上面说的一点题外话,今天要说的是一个大家比较熟悉的东西:第三方登录,因为我的这个毕业设计要用到,所以就顺便加了一下,第三方登陆还是很有用的,这个是现在应用级网站的必备,现在的用户一般都不会去主动去你的注册,一般都是通过第三方的社交账号去登陆,这样省得以后去记密码,而且也比较安全,所以添加第三方登录还是比较好的。下面我结合这个网站的添加过程写点东西。

  第三方登陆,顾名思义:用其他媒体的账号登陆一些网站,现在比较流行的第三方账号一般是:QQ,微博,微信。其他的平台也有,比如:人人,百度贴吧等,感觉这几个没有前面那三个出名,也没有前面那三个用的多,所以今天就说当前最为常用的微博和QQ的登陆方法。

微博登陆

  先说使用新浪微博账号登陆我的网站,微博登陆我理解是有两种:一种是通过前台JS调用不涉及后端的代码就可以实现登陆的功能,另一种是通过SDK进行自己写页面和弹出确认框,自己处理逻辑,下面我会将这两种方法都写一下(其实也不算是两种,只是大体上称为前端和后端 - SDK不一样嘛):

第一种:

  1、先登陆微博的开放平台:http://open.weibo.com,在我的应用中添加自己的网站或者是应用,网站的话域名必须是备案过的域名,不备案的域名禁止添加。我添加是 "答疑之家",等待审核,审通过添加成功之后,点击应用进去之后会看到左边的导航里面有个导航:部署微链接 ->微博登陆 ->微博登陆详细介绍里面就是微博登陆涉及到的文档的添加的步骤。

2.放置登陆按钮,逻辑大致如下:

通过WBML方式

<span style="color: #008080;"> 1</span> <!--没有回调函数的登录按钮-->                 
<span style="color: #008080;"> 2</span> <login-button type="3,2"></login-button>
<span style="color: #008080;"> 3</span>  
<span style="color: #008080;"> 4</span> <!--有回调函数的登录按钮-->      
<span style="color: #008080;"> 5</span> <login-button type="3,2" onlogin="login" onlogout="logout"></login-button>
<span style="color: #008080;"> 6</span> 
<span style="color: #008080;"> 7</span> <span style="color: #008000;">//</span><span style="color: #008000;"> 如需添加回调函数,请在wbml标签中添加onlogin="login" onlogout="logout",并定义login和logout函数。</span>
<span style="color: #008080;"> 8</span> <span style="color: #0000ff;">function</span><span style="color: #000000;"> login(o) {
</span><span style="color: #008080;"> 9</span>     alert(o.<span style="color: #000000;">screen_name)
</span><span style="color: #008080;">10</span> <span style="color: #000000;">}
</span><span style="color: #008080;">11</span>  
<span style="color: #008080;">12</span> <span style="color: #0000ff;">function</span><span style="color: #000000;"> logout() {
</span><span style="color: #008080;">13</span>     alert('logout'<span style="color: #000000;">);
</span><span style="color: #008080;">14</span> }
Nach dem Login kopieren

通过Js的方式:

<span style="color: #008080;"> 1</span> <div id="wb_connect_btn"></div>
<span style="color: #008080;"> 2</span> 
<span style="color: #008080;"> 3</span> WB2.anyWhere(<span style="color: #0000ff;">function</span><span style="color: #000000;"> (W) {
</span><span style="color: #008080;"> 4</span> <span style="color: #000000;">    W.widget.connectButton({
</span><span style="color: #008080;"> 5</span>         id: "wb_connect_btn"<span style="color: #000000;">,
</span><span style="color: #008080;"> 6</span>         type: '3,2'<span style="color: #000000;">,
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;">        callback: {
</span><span style="color: #008080;"> 8</span>             login: <span style="color: #0000ff;">function</span> (o) { <span style="color: #008000;">//</span><span style="color: #008000;">登录后的回调函数</span>
<span style="color: #008080;"> 9</span>                 alert("login: " +<span style="color: #000000;"> o.screen_name)
</span><span style="color: #008080;">10</span> <span style="color: #000000;">            },
</span><span style="color: #008080;">11</span>             logout: <span style="color: #0000ff;">function</span> () { <span style="color: #008000;">//</span><span style="color: #008000;">退出后的回调函数</span>
<span style="color: #008080;">12</span>                 alert('logout'<span style="color: #000000;">);
</span><span style="color: #008080;">13</span> <span style="color: #000000;">            }
</span><span style="color: #008080;">14</span> <span style="color: #000000;">        }
</span><span style="color: #008080;">15</span> <span style="color: #000000;">    });
</span><span style="color: #008080;">16</span> });
Nach dem Login kopieren

添加必要的Js文件:

在HTML标签中增加XML命名空间

<span style="color: #008080;">1</span> 
Nach dem Login kopieren

在HEAD头中引入WB.JS

<span style="color: #008080;">1</span> 
Nach dem Login kopieren

在需要部署登录按钮的位置粘贴WBML代码

<span style="color: #008080;">1</span> 登录按钮
Nach dem Login kopieren

这样就可以,点击按钮就可以通过回调的方式吧用户授权后的信息拿到,比如头像昵称等。

第二种:通过PHP-SDK的方式

这种感觉符合我的需要,可以直接在PHP端处理登陆后的逻辑,前端可以写自己想要的授权打开方式,所以我改用的这一种,首先你需要看一下文档:http://open.weibo.com/wiki/%E6%8E%88%E6%9D%83%E6%9C%BA%E5%88%B6

1:下载PHP-SDK开发包(http://open.weibo.com/wiki/SDK),借助于sdk能让你减少好多不必考虑的东西,所以下载文档还是很有必要的,不过牛逼的你可以袭击写调用方式,毕竟那个文档写的也不咋滴,因为他的代码风格并不是按照PHP PSR(http://www.kancloud.cn/thinkphp/php-fig-psr/3140)规范去写的,感觉很不专业,毕竟是让别人看的东西,规范是很重要的,至少不会挨那么多骂,哈哈!题外话啊!下面看看他的代码,你就该想吐槽了。。。。(换行方式,缩进,if 规范.. 不能忍)

值得注意的是你要记住自己的app id 与key,然后在sdk中换成自己的id

2:前端open登陆授权页面,我是直接通过打开窗口的方式:

<span style="color: #008080;">1</span> function oauthLogin() {
2      var A = window.open("http://***/public/tencentopen.html", "TencentLogin", "width=755, height=550,left=300px,top=60px,menubar=0,scrollbars=1,resizable=1,status=1,titlebar=0,toolbar=0,location=1");
3 }
Nach dem Login kopieren

请求地址的处理逻辑:

<span style="color: #008080;"> 1</span>     <span style="color: #008000;">/*</span><span style="color: #008000;">*
</span><span style="color: #008080;"> 2</span> <span style="color: #008000;">     * 微博打开登陆认证页面
</span><span style="color: #008080;"> 3</span> <span style="color: #008000;">     * code:5000004
</span><span style="color: #008080;"> 4</span> <span style="color: #008000;">     * time:2016.4.28
</span><span style="color: #008080;"> 5</span>      <span style="color: #008000;">*/</span>
<span style="color: #008080;"> 6</span>     public <span style="color: #0000ff;">function</span><span style="color: #000000;"> weiboopen()
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;">    {
</span><span style="color: #008080;"> 8</span>         include_once('weiboOauth/config.php'<span style="color: #000000;"> );
</span><span style="color: #008080;"> 9</span>         include_once('weiboOauth/saetv2.ex.class.php'<span style="color: #000000;">);
</span><span style="color: #008080;">10</span> 
<span style="color: #008080;">11</span>         $weiboObj = <span style="color: #0000ff;">new</span><span style="color: #000000;"> \SaeTOAuthV2(WB_AKEY, WB_SKEY );
</span><span style="color: #008080;">12</span>         $code_url = $weiboObj-><span style="color: #000000;">getAuthorizeURL(WB_CALLBACK_URL);
</span><span style="color: #008080;">13</span> 
<span style="color: #008080;">14</span>         header("Location:"<span style="color: #000000;"> . $code_url);
</span><span style="color: #008080;">15</span>     }
Nach dem Login kopieren

3:用户点击微博登陆后的认证返回逻辑:

    <span style="color: #008000;">/*</span><span style="color: #008000;">*
     * 执行微博认证
     * code:5000005
     * time:2016.4.28
     </span><span style="color: #008000;">*/</span><span style="color: #000000;">
    public </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> weibooauth()
    {
        include_once(</span>'weiboOauth/config.php'<span style="color: #000000;"> );
        include_once(</span>'weiboOauth/saetv2.ex.class.php'<span style="color: #000000;"> );

        $weiboObj </span>= <span style="color: #0000ff;">new</span><span style="color: #000000;"> \SaeTOAuthV2(WB_AKEY, WB_SKEY);

        </span><span style="color: #0000ff;">if</span> (isset($_REQUEST['code'<span style="color: #000000;">])) {
            $keys </span>=<span style="color: #000000;"> array();
            $keys[</span>'code'] = $_REQUEST['code'<span style="color: #000000;">];
            $keys[</span>'redirect_uri'] =<span style="color: #000000;"> WB_CALLBACK_URL;
            </span><span style="color: #0000ff;">try</span><span style="color: #000000;"> {
                $token </span>= $weiboObj->getAccessToken('code'<span style="color: #000000;">, $keys) ;
            } </span><span style="color: #0000ff;">catch</span><span style="color: #000000;"> (OAuthException $e) {}
        }

        $succ[</span>'code'] = '100'<span style="color: #000000;">;
        $succ[</span>'message'] = '授权成功'<span style="color: #000000;">;

        $erro[</span>'code'] = '101'<span style="color: #000000;">;
        $erro[</span>'message'] = '授权失败'<span style="color: #000000;">;

        </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(empty($token)) {
            $msg </span>=<span style="color: #000000;"> $erro;
        } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
            $saeObj </span>= <span style="color: #0000ff;">new</span> \SaeTClientV2(WB_AKEY, WB_SKEY, $token['access_token'<span style="color: #000000;">]);
            $user_info </span>= $saeObj->show_user_by_id($token['uid'<span style="color: #000000;">]);
            $ret </span>= $<span style="color: #0000ff;">this</span>->oauthLogin($user_info, 'weibo'<span style="color: #000000;">);

            </span><span style="color: #008000;">//</span><span style="color: #008000;">授权失败</span>
            <span style="color: #0000ff;">if</span><span style="color: #000000;">(empty($ret)) {
                $msg </span>=<span style="color: #000000;"> $erro;
            } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
                session(</span>'olas_access_token', $token['access_token'<span style="color: #000000;">]);
                $msg </span>=<span style="color: #000000;"> $succ;
            }
        }

        $</span><span style="color: #0000ff;">this</span>->assign('msg'<span style="color: #000000;">, $msg);
        $</span><span style="color: #0000ff;">this</span>->display('oauth'<span style="color: #000000;">);
    }</span>
Nach dem Login kopieren

4:授权成功以后:

  成功以后,你会把用户的信息写入到数据库,微博登陆会返回用户的昵称,头像信息(各个版本大小的头像),用户的性别等等,还有非常用户的用户uid,这个非常重要的,下次登陆会检查这个UID是不是通过微博登陆过。这个和腾讯的不一样,腾讯的不反回UID而是一个openid,不过性质是一样的,待会我会介绍。

之后返回打开窗口的状态码,刷新父页面进行跳转。

<span style="color: #008080;"> 1</span> $(document).ready(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
</span><span style="color: #008080;"> 2</span>       <span style="color: #0000ff;">if</span>($.<span style="color: #008080;">trim</span>($("#code").val()) == '100'<span style="color: #000000;">) {
</span><span style="color: #008080;"> 3</span>              $('#bodys').html("<div>授权成功,正在跳转 . . .</div>"<span style="color: #000000;">);
</span><span style="color: #008080;"> 4</span>              setTimeout("changewindows();", 800<span style="color: #000000;">);
</span><span style="color: #008080;"> 5</span>       } <span style="color: #0000ff;">else</span><span style="color: #000000;"> {
</span><span style="color: #008080;"> 6</span>               $('#bodys').html("<div style="color:red;">授权失败,请重试!</div>"<span style="color: #000000;">);
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;">      }
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;">});
</span><span style="color: #008080;"> 9</span> <span style="color: #0000ff;">function</span><span style="color: #000000;"> changewindows(){
</span><span style="color: #008080;">10</span>       window.opener.location.href = 'http://**'<span style="color: #000000;">;
</span><span style="color: #008080;">11</span>       window.<span style="color: #000000;">close();
</span><span style="color: #008080;">12</span> }
Nach dem Login kopieren

    可以了通过SDK中SaeTClientV2中的show_user_by_id就可以得到用户的信息了。你还可以看到那个Sae***因为这个PHP版本是SAE部门维护的,所以只SAE开头的。步骤挺简单的,大家可以认证阅读他的开发文档,反复调试应该不成问题。我看SDK是对微博开发文档的封装:OAuth2/authorizeOAuth2/access_tokenOAuth2/get_token_infoOAuth2/revokeoauth2OAuth2/get_oauth2_token

如果你在接入中有什么问题你可以直接联系我

QQ登陆

  使用QQ登陆也是很常见的,毕竟使用QQ的人多啊!使用QQ就必须按照人家的规范来,不然人家不给授权啊!下面是步骤:

1:和微博一样,首先要申请使用QQ互联,网址:http://connect.qq.com/manage/index 。首先创建应用,审核通过,不通过也可以使用,不过有限制,好像只能使用你自己的账号登陆,如下图:

 

2:一旦通过审核以后你就可以添加和修改自己网站的一些登陆信息,点击 应用基本信息,这里要特别注意回调地址,因为一旦写错不能进行授权认证,所以回调地址要特别的注意,我在接入的时候就是一直报错。还有一个要注意的是添加协作者,这个可以用作测试,很有用的。下面是我自己的网站添加的信息,大家可以瞅瞅,不过关键信息我已经抹去了,隐私嘛。

3:上面的进行完之后,你就可以下载sdk了(http://wiki.connect.qq.com/sdk%E4%B8%8B%E8%BD%BD),我下的是PHP-sdk,下载后把他放在根目录就可以了。然后本地访问配置(主要是配置自己的应用信息),它上面有一个例子,直接可以调用的那种

然后直接js打开授权页,页面地址请求到后台的方法:

<span style="color: #008080;"> 1</span>     <span style="color: #008000;">/*</span><span style="color: #008000;">*
</span><span style="color: #008080;"> 2</span> <span style="color: #008000;">     * qq打开登陆认证页面
</span><span style="color: #008080;"> 3</span> <span style="color: #008000;">     * code:5000006
</span><span style="color: #008080;"> 4</span> <span style="color: #008000;">     * time:2016.4.24
</span><span style="color: #008080;"> 5</span>      <span style="color: #008000;">*/</span>
<span style="color: #008080;"> 6</span>  <span style="color: #0000ff;">public</span> <span style="color: #0000ff;">function</span><span style="color: #000000;"> tencentopen()
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;"> {
</span><span style="color: #008080;"> 8</span>      <span style="color: #0000ff;">include_once</span>("tencentOauth/qqConnectAPI.php"<span style="color: #000000;">);
</span><span style="color: #008080;"> 9</span>      <span style="color: #800080;">$qc</span> = <span style="color: #0000ff;">new</span><span style="color: #000000;"> \QC();
</span><span style="color: #008080;">10</span>      <span style="color: #800080;">$qc</span>-><span style="color: #000000;">qq_login();
</span><span style="color: #008080;">11</span>  }
Nach dem Login kopieren

授权成功以后要再次初始化那个sdk类:感觉这是他的BUG,必须拿上一次登陆返回的acs和open_id去初始化QC重新得到用户的信息。

<span style="color: #008080;">1</span>  //申请开发$openid
2  $obj = new \QC();
3  $acs = $obj->qq_callback();
4  $openid = $obj->get_openid();
5 
6  //重新赋值,得到用户信息
7  $qc = new \QC($acs, $openid);
8  $user_info = $qc->get_user_info();
Nach dem Login kopieren

完整的代码如下:

<span style="color: #008080;"> 1</span>     <span style="color: #008000;">/*</span><span style="color: #008000;">*
</span><span style="color: #008080;"> 2</span> <span style="color: #008000;">     * qq登陆认证逻辑
</span><span style="color: #008080;"> 3</span> <span style="color: #008000;">     * code:5000007
</span><span style="color: #008080;"> 4</span> <span style="color: #008000;">     * time:2016.4.24
</span><span style="color: #008080;"> 5</span>      <span style="color: #008000;">*/</span>
<span style="color: #008080;"> 6</span>     <span style="color: #0000ff;">public</span> <span style="color: #0000ff;">function</span><span style="color: #000000;"> oauth()
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;">    {
</span><span style="color: #008080;"> 8</span>         <span style="color: #0000ff;">include_once</span>("tencentOauth/qqConnectAPI.php"<span style="color: #000000;">);
</span><span style="color: #008080;"> 9</span> 
<span style="color: #008080;">10</span>         <span style="color: #008000;">//</span><span style="color: #008000;">申请开发$openid</span>
<span style="color: #008080;">11</span>         <span style="color: #800080;">$obj</span> = <span style="color: #0000ff;">new</span><span style="color: #000000;"> \QC();
</span><span style="color: #008080;">12</span>         <span style="color: #800080;">$acs</span> = <span style="color: #800080;">$obj</span>-><span style="color: #000000;">qq_callback();
</span><span style="color: #008080;">13</span>         <span style="color: #800080;">$openid</span> = <span style="color: #800080;">$obj</span>-><span style="color: #000000;">get_openid();
</span><span style="color: #008080;">14</span> 
<span style="color: #008080;">15</span>         <span style="color: #008000;">//</span><span style="color: #008000;">重新赋值,得到用户信息</span>
<span style="color: #008080;">16</span>         <span style="color: #800080;">$qc</span> = <span style="color: #0000ff;">new</span> \QC(<span style="color: #800080;">$acs</span>, <span style="color: #800080;">$openid</span><span style="color: #000000;">);
</span><span style="color: #008080;">17</span>         <span style="color: #800080;">$user_info</span> = <span style="color: #800080;">$qc</span>-><span style="color: #000000;">get_user_info();
</span><span style="color: #008080;">18</span> 
<span style="color: #008080;">19</span>         <span style="color: #800080;">$succ</span>['code'] = '100'<span style="color: #000000;">;
</span><span style="color: #008080;">20</span>         <span style="color: #800080;">$succ</span>['message'] = '授权成功'<span style="color: #000000;">;
</span><span style="color: #008080;">21</span> 
<span style="color: #008080;">22</span>         <span style="color: #800080;">$erro</span>['code'] = '101'<span style="color: #000000;">;
</span><span style="color: #008080;">23</span>         <span style="color: #800080;">$erro</span>['message'] = '授权失败'<span style="color: #000000;">;
</span><span style="color: #008080;">24</span> 
<span style="color: #008080;">25</span>         <span style="color: #800080;">$msg</span> =<span style="color: #000000;"> [];
</span><span style="color: #008080;">26</span>         <span style="color: #0000ff;">if</span>(<span style="color: #0000ff;">empty</span>(<span style="color: #800080;">$user_info</span><span style="color: #000000;">)) {
</span><span style="color: #008080;">27</span>             <span style="color: #800080;">$msg</span> = <span style="color: #800080;">$erro</span><span style="color: #000000;">;
</span><span style="color: #008080;">28</span>         } <span style="color: #0000ff;">else</span><span style="color: #000000;"> {
</span><span style="color: #008080;">29</span>             <span style="color: #800080;">$user_info</span>['openid'] = <span style="color: #800080;">$openid</span><span style="color: #000000;">;
</span><span style="color: #008080;">30</span>             <span style="color: #800080;">$user_info</span>['appid'] = C('QQ_APPID'<span style="color: #000000;">);
</span><span style="color: #008080;">31</span>             <span style="color: #800080;">$ret</span> = <span style="color: #800080;">$this</span>->oauthLogin(<span style="color: #800080;">$user_info</span>, 'tencent'<span style="color: #000000;">);
</span><span style="color: #008080;">32</span>             
<span style="color: #008080;">33</span>             <span style="color: #008000;">//</span><span style="color: #008000;">授权失败</span>
<span style="color: #008080;">34</span>             <span style="color: #0000ff;">if</span>(<span style="color: #0000ff;">empty</span>(<span style="color: #800080;">$ret</span><span style="color: #000000;">)) {
</span><span style="color: #008080;">35</span>                 <span style="color: #800080;">$msg</span> = <span style="color: #800080;">$erro</span><span style="color: #000000;">;
</span><span style="color: #008080;">36</span>             } <span style="color: #0000ff;">else</span><span style="color: #000000;"> {
</span><span style="color: #008080;">37</span>                 <span style="color: #800080;">$msg</span> = <span style="color: #800080;">$succ</span><span style="color: #000000;">;
</span><span style="color: #008080;">38</span> <span style="color: #000000;">            }
</span><span style="color: #008080;">39</span> <span style="color: #000000;">        }
</span><span style="color: #008080;">40</span> 
<span style="color: #008080;">41</span>         <span style="color: #800080;">$this</span>->assign('msg', <span style="color: #800080;">$msg</span><span style="color: #000000;">);
</span><span style="color: #008080;">42</span>         <span style="color: #800080;">$this</span>->display('oauth'<span style="color: #000000;">);
</span><span style="color: #008080;">43</span>     }
Nach dem Login kopieren

这里要注意QQ和微博返回用户的ID是不一样的,微博返回的就是用户在微博的真实id,但是QQ不是。他返回的是qq号对应的一个open_Id,感觉腾讯有点扯淡,这直接导致,你无法得到登陆者的QQ号,有点悲哀,只得到一个和QQ号一一对应的open_id,也算不错了,哎!

好了,到这里基本上把微博和QQ的登陆说完了,期间或遇到各种的问题,比如回调地址失败,登陆之后刷新父页面跳转等等,设计到各种的用户体验。

如果大家在添加的时候遇到解决不了的问题可以Q我,我会的我一定给你说,大家共同提高嘛,另外上面说的不对的您可以通过评论告诉我,共同进步嘛。

转载请注明出处,谢谢! 我会同步更新到我的个人网站:www.zhaoyafei.cn

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage