Using Instagram API with Monaca App

Benny Wan
Benny Wan
Jul 20, 2018 · 5 min read

The Flow of the App

認証する is a Japanese word that can be used as Authenticate in this context
This is what the login page looks like when language is set to English.
Don’t worry; we’ll go over what “sandbox mode” is later (in The Closing section).
Lovely.

Pre-requirements

Step 1 & 2 locations
Leave no checkmark alive!

About the Sample App

Before you can run the sample app code, you must do the following:

let client_id = 'YOUR_INSTAGRAM_CLIENT_ID';
let redirect_uri = 'YOUR_REDIRECT_URL';

Obtaining the Access Token

let authUrl = `https://www.instagram.com/oauth/authorize/?client_id=${client_id}&redirect_uri=${redirect_uri}&response_type=token&scope=public_content`;

The getPhoto Function

let photoUrl = 'https://api.instagram.com/v1/users/self/media/recent/';
Wait… where have I seen this before…?

The Closing

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Thanks to Khemry Khourn.

Benny Wan

Written by

Benny Wan

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.