Authenticate with Instagram

For all those that are also struggling with this, here it is how I got my User Id and Access Token needed for the configuration block:

1. Create an Instagram Client application
2. Get your client details
3. Authenticate
4. Configure Instagram Block on your site

1 Create an Instagram Client application

You have to create your own instagram application here:

2 Get your client details

In your Instagram Developer account, click "Manage Clients" and take note of the "Client ID", "Client Secret" and "Redirect URI" because you'll need them soon. Make sure you are using a complete URL for your Redirect URI, such as "https://drupal.org".

3 Authenticate

3.a Using CURL

First, add this into your browser:

https://api.instagram.com/oauth/authorize/?client_id=YOUR-CLIENT-ID&redirect_uri=YOUR REDIRECT-URI&response_type=code&scope=public_content

Note that the REDIRECT-URI above should be URL encoded, such as https%3A%2F%2Fdrupal.org.

You'll then be redirected to the url you redirected to. Take note of the url as this is where you receive the code you need:

http://your-redirect-uri?code=YOU-NEED-THIS-CODE

Now open up your terminal and paste in this (adding your specific id, secret, redirect uri, & code):

curl -F 'client_id=YOUR CLIENT_ID HERE' \
    -F 'client_secret=YOUR CLIENT_SECRET HERE' \
    -F 'grant_type=authorization_code' \
    -F 'redirect_uri=YOUR AUTHORIZATION_REDIRECT_URI HERE' \
    -F 'code=THE CODE YOU RECEIVED' \
    https://api.instagram.com/oauth/access_token

You should receive something that looks like this:

{
    "access_token": "fb2e77d.47a0479900504cb3ab4a1f626d174d2d",
    "user": {
        "id": "1574083",
        "username": "snoopdogg",
        "full_name": "Snoop Dogg",
        "profile_picture": "..."
    }
}

3.b Using browser

Build the following url and paste it on your browser: https://api.instagram.com/oauth/authorize/?client_id=[your client id]&redirect_uri=[your redirect uri]&response_type=token

You may see the following error "Implicit authentication is disabled". If so, then you have to edit your Instagram Client, go to the Security tab, and disable the option Disable implicit OAuth, you can enable this back once you get to the following point.

If everything went well you should have been redirected to an URI that looks like this https://my_redirect.uri/#access_token=xxxxxxxxxx.yyyyyyy.zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

On the access_token key, the "x" part (all before the first period) is your User Id.

4 Configure Instagram Block on your site

Now go to your Instagram Block config page and replace your access token with this new one. The user id is likely the same. Save and then it should start working again.