# Implementing Login Connect with Messenger
There are 2 main ways to integrate this feature into the Facebook Login flow on your mobile app or website:
- By having a single App that handles both FB Login and Messenger Send API calls
- Having two separate apps, one for FB Login and a separate app for Messenger Send API calls.
This second scenario is relevant for Messenger Technology providers adding support for Login Connect with Messenger on their platforms and brands that have a FB Login App of type Consumer. For additional details on Facebook App types and which products and permissions are available for each type, please refer to [this documentation](https://developers.facebook.com/docs/development/create-an-app/app-dashboard/app-types).
## Roles overview
The main roles involved in this integration are App admins and Page admins. Please note that the same person can be an admin of both the page and the app.
## Integration steps overview
Review the main steps of the integration for each role.
**Warning:** The Messenger App can be the same as the Login App.
## Single App integration
### 1. Developer Dashboard configuration
- Make sure your Facebook Application has access to `pages_messaging` and Messenger is correctly configured. If not, you can follow the [Messenger getting started](https://developers.facebook.com/documentation/business-messaging/messenger-platform/get-started) guide.
- Request the `user_messenger_contact` to get access to the Login Connect with Messenger section in the developer panel settings. During development, both `pages_messaging` and `user_messenger_contact` will work with Admins, Developers and Testers of the app. Once your app is ready to go live, make sure to submit these permissions for [App Review](https://developers.facebook.com/docs/apps/review). Both `pages_messaging` and `user_messenger_contact` permissions can be requested together.
- In Facebook login settings, enable the Messenger consent screen
- Add the Facebook Page that will be granting messaging permission to the app to message users. The page name is going to be shown to the user when going through the Login flow. To find out the ID of your Page,
[these steps](https://www.facebook.com/help/1503421039731588).
- Define the page that will be shown as default when the permission is requested without sending the `messenger_page_id` parameter.
### 2. Configure Login Flow
In the Facebook Login setup, request the `user_messenger_contact` permission from the user by adding it to `scope` parameter. Also provide the Page ID in the form of a `messenger_page_id` parameter.
Currently, the new permission is supported by the [Javascript SDK Login Dialog](https://developers.facebook.com/documentation/facebook-login/web), [manual Login flow](https://developers.facebook.com/documentation/facebook-login/guides/advanced/manual-flow) on the Web, [Android SDK Login Dialog](https://developers.facebook.com/documentation/facebook-login/android) and [iOS SDK login dialog](https://developers.facebook.com/documentation/facebook-login/ios). Additionally, the `messengerPageId` parameter is supported in both iOS and Android SDKs. The `resetMessengerState` parameter is only supported on the Android SDK, both on the [LoginManager](https://developers.facebook.com/docs/reference/androidsdk/current/facebook/com/facebook/login/loginmanager.html#resetmessengerstate) and [LoginButton](https://developers.facebook.com/docs/reference/androidsdk/current/facebook/com/facebook/login/widget/loginbutton.html) classes.
**JavaScript SDK Login Dialog**
```
FB.login(function(response) {
// handle the response
}, {
scope: 'public_profile,email,user_messenger_contact',
messenger_page_id: 12345
});
```
**Manual Login flow**
```
https://www.facebook.com/v25.0/dialog/oauth?
client_id={app-id}
&redirect_uri={redirect-uri}
&auth_type=rerequest
&scope=email,user_messenger_contact
&messenger_page_id=12345
```
### 3. Retrieve or generate `login_id` value
Once a user has successfully logged in, you are able to message the user. To do so, you will need to retrieve or generate the `login_id`.
#### Option 1: Set up and process Messenger webhooks
Subscribe to the `messaging_optins` [webhook](https://developers.facebook.com/documentation/business-messaging/messenger-platform/webhooks) for your app/page. Once set up, you will receive a [`messaging_optins`](https://developers.facebook.com/documentation/business-messaging/messenger-platform/reference/webhook-events/messaging_optins) event when a user grants your app `user_messenger_contact` during the Login flow.
**Warning:** Note that if you use different apps for Messenger and Login, the webhook event will be sent to the Messenger app. For this purpose, the Messenger app needs to be granted the `pages_manage_metadata` permission for the page in scope.
```
{
"recipient": {
"id": "<PAGE_ID>"
},
"timestamp": 1234567890,
"optin": {
"login_id": "12345",
}
}
```
#### Option 2: Self-generate on the fly
Generate the SHA-256 hash of the following string with the app's Client Token as the key: `umc_<ASID>_<app_id>_<page_id>`
You can find the Client Token in the App Dashboard: Settings > Advanced > Security.
**Warning:** If sending messages after a successful user login, verify which permissions the user granted your app by calling the `/{user-id}/permissions` [edge.](https://developers.facebook.com/docs/graph-api/reference/user/permissions)
Example code in PHP:
```
$login_id = hash_hmac(‘sha256’, ‘umc_<asid>_<app_id>_<page_id>’, $client_token);
```
### 4. Send a message
Use the [Messenger Send API](https://developers.facebook.com/documentation/business-messaging/messenger-platform/reference/send-api) to send a message to the user, using `login_id` from the previous step as `recipient.login_id`.
**Warning:** In order to send a message on behalf of a page, the app must have the `pages_messaging` permission for it.
Example request using [Quick Replies](https://developers.facebook.com/documentation/business-messaging/messenger-platform/send-messages/quick-replies):
```
curl -X POST -H "Content-Type: application/json" -d '{
"messaging_type":"<MESSAGING_TYPE>",
"recipient":{
"login_id":"<LOGIN_ID>"
},
"message":{
"text":"Hello world! Thanks for signing up. Here is what you can do on Messenger...",
"quick_replies":[
{
"content_type":"text",
"title":"Outfit suggestions",
"payload":"CURATION"
},
{
"content_type":"text",
"title":"Talk to an agent",
"payload":"CARE_HELP"
}
]
}
}' "https://graph.facebook.com/v25.0/me/messages?access_token=<PAGE_ACCESS_TOKEN>"
```
**Note:** **Comply with requirements for Login Connect and set expectations**
You must make it clear to users why you contacted them and your messages must match what the user agreed to receive. You can also make it easier for users to interact with you on Messenger using [Quick Replies](https://developers.facebook.com/documentation/business-messaging/messenger-platform/send-messages/quick-replies) to help guide their responses.
**Continue using the same Page**
Once a message is sent through a Page, that Page becomes the only Page allowed to message a user using the `login_id` recipient key.
**Warning:** The following conditions apply (see [Requirements for Using Login Connect with Messenger](https://developers.facebook.com/documentation/facebook-login/login-connect#requirements) for further requirments):
* The initial message must be sent within 24 hours from the user opting in to receiving messages.
* You must use a Page access token from a page that has granted the app the `pages_messaging` permission.
### 5. Continuing the conversation
When a user continues the conversation with you on Messenger, the user will be identified with a PSID according to the [Messenger webhook specifications](https://developers.facebook.com/documentation/business-messaging/messenger-platform/webhooks). You will need to ensure you comply with the [Developer Policies](https://developers.facebook.com/devpolicy) and Developer Documentation requirements, including those specific to Messenger Platform when messaging users.
Your solution might require connecting a PSID with the corresponding `login_id`. If the user responds to your first message which you sent to a `login_id`, the appropriate event (`messages`, `messaging_postbacks`, etc.) will be sent to your webhook, with a `prior_message` object appended, containing the `login_id`.
For example, the following `messages` event would be sent to your webhook if the user responded with a text message:
```
{
"sender":{
"id":"<PSID>"
},
"recipient":{
"id":"<PAGE_ID>"
},
"timestamp":1458692752478,
"message":{
"mid":"mid.145773344618:41d102a3e1ae206a38",
"text":"Thanks for messaging me!"
},
"prior_message":{
"source":"fb_login",
"identifier":"12345"
}
}
```
## Resetting Your Messenger State
After a user grants your business Page permission to contact them on Messenger, your Page has 24 hours to send an initial message. This would normally be performed once per user, but you may need to reset your account’s Messenger state to test changes for your integration.
Developers can reset this state by adding the `reset_messenger_state` parameter with the value of `1` when entering Facebook’s OAuth flow. Once the Facebook Login dialog is loaded, the login user's Messenger state will be reset, allowing the developer to continue testing with the current request on the web, or continuing on a different request such as with the mobile SDKs.
**Warning:** Please note the following when resetting your Messenger state:
* This functionality is only available for Admins of your application to perform and won’t reset the state of any other users interacting with your application.
* Resetting your Messenger state isn’t available through the Mobile SDK’s OAuth flow at this time. Developers must use the JavaScript SDK or construct a manual Login Link to reset their Messenger state.
**JavaScript SDK Login Dialog**
```
FB.login(function(response) {
// handle the response
}, {
scope: 'public_profile,email,user_messenger_contact',
messenger_page_id: 12345,
reset_messenger_state: 1
});
```
**Manual Login flow**
```
https://www.facebook.com/v25.0/dialog/oauth?
client_id={app-id}
&redirect_uri={redirect-uri}
&auth_type=rerequest
&scope=email,user_messenger_contact
&messenger_page_id=12345
&reset_messenger_state=1
```
## See Also {#additional-resources}
* [Login Connect with Messenger](https://developers.facebook.com/documentation/facebook-login/login-connect)
* [Login Connect FAQ](https://developers.facebook.com/documentation/facebook-login/login-connect/faq)
* [Facebook Login](https://developers.facebook.com/documentation/facebook-login)
* [Messenger Getting Started](https://developers.facebook.com/documentation/business-messaging/messenger-platform/get-started)