Account Kit for Basic Web (Without JavaScript)

The basic web implementation lets users who do not have JavaScript enabled on their devices log in to your app with Account Kit. Account Kit for Basic web is compatible with Free Basics.

Setting up Account Kit in your web app has the following steps:

1. Prerequisites

2. Set Your Server and Redirect URLs

3. Configure Your Login HTML page

4. Configure an HTML Page for Successful Login


Also see Next Steps for optional customizations you can perform.

1. Prerequisites

Before you begin integrating Account Kit into your app, make sure you have completed the following prerequisites.

A. Create a Developer Account

If you don't have a Facebook developer account, create one by clicking the button below.

Your Facebook developer account gives you access to developer tools and allows you to create Facebook apps.

Already have a Facebook developer account? Skip to the next step.

Create Developer Account

B. Get a Facebook App ID

Account Kit for the web requires a Facebook app ID. Follow the steps in the Getting Started, or to use Quick Start, click the button below.

Quick Start for Website

2. Set Your Server and Redirect URLs

To ensure that only your application can make valid requests and receive valid responses from Account Kit, it is required you set your Server and Redirect URLs.

In the Account Kit section of your App's Dashboard, enter the domain(s) which Account Kit requests will originate from in the server URLs field and enter the domain(s) with path which you expect to receive a response from Account Kit in the redirect URLs field. Then click Save Changes.

3. Configure Your Login HTML Page

In the login page (for example, login.html) that your web application serves, you can set up basic Account Kit by following these configuration steps:

Setup an HTML form element on your page:

<form method="get" action="LOGIN_TYPE">
  <input type="hidden" name="app_id" value="YOUR_APP_ID">
  <input type="hidden" name="redirect" value="YOUR_REDIRECT_URL">
  <input type="hidden" name="state" value="YOUR_CSRF_TOKEN">
  <input type="hidden" name="fbAppEventsEnabled" value=true>
  <button type="submit">Login</button>
</form>

Use the following form action attribute for SMS Login:

action="https://www.accountkit.com/v1.0/basic/dialog/sms_login/"

Or use the following form action attribute for email Login:

action="https://www.accountkit.com/v1.0/basic/dialog/email_login/"

The following parameters are required.

URL Parameter Description

app_id

A string containing the Facebook App ID of your app.

redirect

A string containing the URL of where you are expecting to receive a response from Account Kit. Make sure this URL matches one of the redirect URLs set in the App Dashboard.

state

A non-guessable value which should originate in the app's server, and be passed to the login flow. It is returned back to the app client unchanged, and the app client can pass it back to server to verify the match with the original value.

The following parameters are optional.

Optional Parameter Description

country_code

A country identifier that determines the dialing code for the phone number, for example, US = 1 or FR = 33. See SMS Country Codes.

email

A preset email address. Only valid for Email Login.

debug

A Boolean specifying whether to display a descriptive error message when an error occurs. If true, an explicit error message is displayed. If false, only a generic error is displayed.

locale

The language of text in Account Kit.

phone_number

A preset phone number. Only valid for SMS Login.

4. Configure a Server Endpoint for Successful Login

You will need a server endpoint to receive a response from Account Kit. This URL endpoint will be passed into Account Kit as the redirect parameter. The following parameters will be passed to your server's endpoint:

URL Parameter Description

status

A string indicating the status of the request - see below for the values this string can have.

code

When status is "PARTIALLY_AUTHENTICATED", this string contains an authorization code, which your server may exchange for a user access token.

state

A non-guessable value which should originate in the app's server, and be passed to the login flow. It is returned back to the app client unchanged, and the app client can pass it back to server to verify the match with the original value.

Use the authentication code received from the response to retrieve the User Access Token. This process is explained in the Graph API Documentation under the “Retrieving User Access Tokens with an Authorization Code” section. Optionally, you can also access user data. This is explained in the Graph API Documentation under the “Access Token Validation” section.