你现在的位置:首页 > PHP网站建设知识库 > facebook api > 正文

网站如何实现用FaceBook登录

facebook开发中,我们经常会遇到facebook登录程序。首先打开facebook开发者这个页面,链接地址为:https://developers.facebook.com/

可以看到”RegisterNow ”这个按钮,现在点击进去去注册。

第一步点击我接受条款

第二步就是了解你用这个开发者所使用的一些基本情况,比如你网站是使用什么语言,你有多久的开发/程序经验,以及你的开发应用是哪些主要类型的都可以在下面设置打钩,当然也可以跳过,这个不是一个必填项。可以多选:

第三部设置完成,可以看到

完成注册以后,然后我们在输入一个这个网址https://developers.facebook.com/当然也可以直接在下一个步骤直接创建一个应用程序。

点开此网站https://developers.facebook.com/

我们点击app这个标签,来设置app

 \

点击创建 app按钮

 \

接下来会有一个验证码,输入对之后可以看到

 \

最后点击保存。

然后可以开始以下步骤:(以下是分三步实现如何获取facebook账户信息,最后呈现的是json格式的)

Step1: 做登入的按鍵

只要加上一个超链接就可以了

FaceBookLogin

加CODE的参数是为了当使用者按下登录后facebook会让使用者登录后返回到你的网站(redirect_uri所设置的地址)并附带一个code参数回来,如下:

http://www.test.com/Register.html?code=AQAnb2EpZ41kt0BKWHjWqE0ejfk9WMyl_

Step2: 利用facebook 传回来的code参数向facebook取得access_token

得到access_token

点击链接后会得到facebook回传的access_token值:

access_token=CAACTVCcv698BALweaniaeRpkEByG1zmqZAMLhCnTa0Si2DGW

Step3: 利用access_token就可以取的使用者的资料

获取使用者资料 

Ps:这个文档是我们针对网站和facebook的链接来继续设置的,不同的应用程序要放在什么平台上发布都可以选择对应的平台(比如还有手机应用,ios应用等);如果要连上FaceBook官网还要各位拨下vpn

这下面我贴出facebook官方提供的以接口方式实现获取账户信息的方法::

<!--startFaceBook-->
    <div id="fb-root"></div>
<script>
    // Additional JS functions here
    window.fbAsyncInit = function () {
        FB.init({
            appId: '16198964', // App ID
            channelUrl: '//www.acgon.com/channel2.htm', // Channel File
            status: true, // check login status
            cookie: true, // enable cookies to allow the server to access the session
            xfbml: true  // parse XFBML
        });

        // Additional init code here
        FB.Event.subscribe('auth.authResponseChange', function (response) {
            // Here we specify what we do with the response anytime this event occurs. 
            if (response.status === 'connected') {
                // The response object is returned with a status field that lets the app know the current
                // login status of the person. In this case, we're handling the situation where they 
                // have logged in to the app.
                testAPI();
            } else if (response.status === 'not_authorized') {
                // In this case, the person is logged into Facebook, but not into the app, so we call
                // FB.login() to prompt them to do so. 
                // In real-life usage, you wouldn't want to immediately prompt someone to login 
                // like this, for two reasons:
                // (1) JavaScript created popup windows are blocked by most browsers unless they 
                // result from direct interaction from people using the app (such as a mouse click)
                // (2) it is a bad experience to be continually prompted to login upon page load.
                FB.login();
            } else {
                // In this case, the person is not logged into Facebook, so we call the login() 
                // function to prompt them to do so. Note that at this stage there is no indication
                // of whether they are logged into the app. If they aren't then they'll see the Login
                // dialog right after they log in to Facebook. 
                // The same caveats as above apply to the FB.login() call here.
                FB.login();
            }
        });
    };

    // Load the SDK asynchronously
    (function (d) {
        var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
        if (d.getElementById(id)) { return; }
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        ref.parentNode.insertBefore(js, ref);
    } (document));

    function testAPI() {
        console.log('Welcome!  Fetching your information.... ');
        FB.api('/me', function (response) {
            console.log('Good to see you, ' + response.name + '.'+'id:'+response.id);
        });
    }

</script>
    <!--EndFaceBook-->
     <fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>

 

ps:上面的“response.name”就是你的用户名;“response.id”就是你FaceBook的用户ID

console.log('Good to see you, ' + response.name + '.'+'id:'+response.id);//你可以用火狐的firebug然后点“控制台”来查看输出的信息

这段当然,你也可以用一个文本框,然后用jquery方法把取到值赋值给文本框。