openfb/example.html at main · cjpatoilo/openfb · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>OpenFB Sample</title>
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css"
    />
  </head>
  <body>
    <div class="container">
      <h1>OpenFB</h1>
      <p>
        Facebook integration in JavaScript apps running in the browser and in
        Cordova.
      </p>
      <hr />

      <button onclick="login()">Login with Facebook</button>
      <hr />

      <button onclick="getInfo()">Get My Info</button>
      <p>Name: <span id="userName"></span></p>
      <img id="userPic" />
      <hr />

      <textarea id="Message" placeholder="What's on your mind?"></textarea>
      <button onclick="share()">Share</button>
      <hr />

      <p>
        Complete Facebook Logout. After logging out, you'll have to login again
        and provide your Facebook credentials.
      </p>
      <button onclick="logout()">Logout</button>
      <hr />

      <button onclick="readPermissions()">Read Permissions</button>

      <p>
        Revoke App Permissions. After revoking permissions, you'll have to grant
        permissions again when logging in.
      </p>
      <button onclick="revoke()">Revoke Permissions</button>
    </div>

    <!--cordova.js is automatically injected by the Cordova build process-->
    <script src="openfb.js"></script>

    <script>
      // Defaults to sessionStorage for storing the Facebook token
      openFB.init({ appId: 'YOUR_FB_APP_ID' })

      //  Uncomment the line below to store the Facebook token in localStorage instead of sessionStorage
      //  openFB.init({appId: 'YOUR_FB_APP_ID', tokenStore: window.localStorage})
      function login () {
        openFB.login(
          response => {
            alert(
              esponse.status === 'connected'
                ? `Facebook login succeeded, got access token: ${
                    response.authResponse.accessToken
                  }`
                : `Facebook login failed: ${response.error}`,
            )
          },
          {
            scope: 'email',
          },
        )
      }

      function getInfo () {
        openFB.api({
          path: '/me',
          success: data => {
            console.log(JSON.stringify(data))
            document.getElementById('userName').innerHTML = data.name
            document.getElementById('userPic').src =
              'http://graph.facebook.com/' + data.id + '/picture?type=small'
          },
          error: errorHandler,
        })
      }

      function share () {
        openFB.api({
          method: 'POST',
          path: '/me/feed',
          params: {
            message:
              document.getElementById('Message').value ||
              'Testing Facebook APIs',
          },
          success: () => alert('the item was posted on Facebook'),
          error: errorHandler,
        })
      }

      function readPermissions () {
        openFB.api({
          method: 'GET',
          path: '/me/permissions',
          success: result => alert(JSON.stringify(result.data)),
          error: errorHandler,
        })
      }

      function revoke () {
        openFB.revokePermissions(
          () => alert('Permissions revoked'),
          errorHandler,
        )
      }

      function logout () {
        openFB.logout(() => alert('Logout successful'), errorHandler)
      }

      function errorHandler (error) {
        alert(error.message)
      }
    </script>
  </body>
</html>