">mixi Developer Center (mDC)

mixi Page Apps

mixi Page Apps (English) » Technical specification » JavaScript API

JavaScript API

mixi page applications provide a JavaScript API to support developing apps. (PC and smartphone only)

This API provides the following functions.

Function name Description
User authorization Function to display the dialog window to get the OAuth 2.0 authorization from user
iframe height adjustment Function to adjust the height of the iframe where page apps have been drawn
Scroll position adjustment Function to scroll the window vertically relative to the top of the application's drawing area.  

Preparation for use

First, load the javascript library

<script src="http://static.mixi.jp/js/page.js"></script>

Then, call the initialization function as follows.

mixi.init({ appId: "xxxxxxxxxxxxxx" }); // Insert the app's Comsumer Key here 

Specify parameters as follows.

Parameter Name Description
appId App's Consumer Key

The API is now ready for use.

User authorization

Display a dialogue to get the user's authorization for the mixi Graph API. When a user authorizes or refuses authorization, the iframe's src will be redrawn and redirected to the redirect_uri that was configured during mixi page app registration.

The authorization dialog is invoked as follows.

mixi.auth({ scope: "r_profile r_voice w_voice", state: "touch" });
Parameter name Value
scope A list of requested authorization scopes formatted as a space delimited string. This is required.
state This parameter will be passed when redirecting to the redirect_uri. This is optional.

To determine the required authorization scopes, please refer to the mixi Graph API document for each Graph API (http://developer.mixi.co.jp/en/connect/mixi_graph_api), and the Page API (http://developer.mixi.co.jp/en/page-apps/spec/page-api/)

If a user authorizes, it will redirect as follows.

http://example.com/callback?code=347ab1db9398d60b5ef3515e672d1e
Parameter name Value
code Authorization Code
state The value of the state parameter passed when the dialog is invoked

An Authorization Code expires 3 minutes after issue.
If user denies authorization, it redirects as follows.

http://example.com/callback?error=access_denied
Parameter name Value
error Error contents
state The value of the state parameter passed when the dialog is invoked

iframe height adjustment

You can adjust the height of the iframe where the app is displayed. Supports both PC and smartphone. (※) Adjustment is done as follows.

mixi.window.adjustHeight(height);

Specify parameters as follows.

Parameter name Value
height iframe height (px).  If omitted, it will auto adjust according to the iframe's contents at the time of the call.

※※ Most browsers installed on smartphones auto adjust the iframe height according to the content inside. *1。
On the other hand, some browsers installed on Android phones don't auto adjust the iframe height.<
Those browsers need to adjust the height in the app.For images and strings, it is a good idea to call the adjustHeight() function after network and DOM operations.
*1:Those browsers can't set a smaller value than the content's height even with the adjustHeight() function.

Scroll position adjustment

Scroll the window vertically to a position along the Y-axis relative to the top of the application's drawing area.

mixi.window.scrollTo(y); 

Specify parameters as follows.

Parameter name Value
y The distance to scroll from the top of the application's drawing area. (px)
If the value is omitted or invalid, the window will be scrolled to the top of the application's drawing area.

If you switch from a long display window to a shorter one, the contents might be partially cut off.
If you call the scrollTo() function after changing the window size, the users will be able see the window contents more easily.

TOP OF THIS PAGE