">mixi Developer Center (mDC)

mixi Page Apps

mixi Page Apps (English) » Technical specification » Technical specification overview

Technical specification overview

mixi page apps consist of the following two main components

  1. An iframe for mixi page apps to display on the mixi page.
    mixi provides an iframe for the mixi page app on the mixi page. The iframe is drawn by the application server at the iframe URL's domain.
    (For mobile only, there is a proxy server between mixi and the application server.)
  2. mixi page API (Subsequently referred to as the Page API)
    The Page APIs are added as a part of the mixi Graph API. The Page API will allow handling of various features of mixi pages.
    An application registered as a mixi page app can use the mixi Graph API, including the Page API.
    A developer can create a mixi page app that uses information from mixi with these APIs.
 

mixi page app display area

The display area is the iframe image area that displays the mixi page app. The width is fixed as follows.

 

Devices Maximum width
PC 520px
Mobile 240px
Smartphone 320px
Smartphone (when rotated 90 degree) 480px

The height is changeable. For PC you can change the iframe height using JavaScript.
Please see the 'iframe height adjustment' from the 'JavaScript API' (http://developer.mixi.co.jp/en/page-apps/spec/javascript-api/#toc-2) for details.

PC, Smartphone

You can host the mixi page app at an arbitrary domain.
When a user runs the mixi page app, the app displays in an iframe on the mixi page.
An example URL for a user to run a mixi page app is as follows.

http://page.mixi.jp/run_page_apps.pl?module_id=[Module-ID]&page_id=[Page-ID]&appParams=%7B%22uid%22%3A%221569%22%7D
Parameter name Value
page_id mixi page ID
module_id ID used to discriminate when multiple instances of the same app are installed on the mixi page
appParams Arbitrary values passed to the app. It should be in the JSON format and URI escaped.
(Example: URI escape ({"uid":"1569"}, '%7B%22uid%22%3A%221569%22%7D')

When you run the mixi app, the mixi platform will make a signed POST request to the Start URL which was specified during the mixi page app registrations.

The parameters passed to the mixi page app are as follows.

Parameter name Value
mixi_page_id mixi page ID
mixi_module_id ID used to discriminate when multiple instances of the same app are installed on the mixi page
mixi_is_owner true/false if the viewer is the mixi page owner
mixi_is_follower true/false if the viewer is a follower of the mixi page
mixi_viewer_id Viewer platform ID
※ Only applicable when the mixi page app has obtained r_profile access in the mixi Graph API authentication and authorization. If not, it won't be included
The parameter names specified above in appParams (Example:uid) The values specified above in appParams (Example: 1569)

When starting up a mixi page app, a signed request is sent.
Please be sure to validate the request and make sure that the request is from mixi.

Mixi page apps implement the OAuth signed parameter specification. 
For information on generating signature-based strings, please refer to the 'OAuth Core 1.0' (http://oauth.net/core/1.0/#rfc.section.A.5.1).

For validation, please refer to 'validating the signed request' (http://developer.mixi.co.jp/appli/spec/pc/validating_signed_requests ) (Japanese).

The publish key used for validation is as follows

PC

-----BEGIN CERTIFICATE-----
MIIDfDCCAmSgAwIBAgIJAIzC8GwwTFzxMA0GCSqGSIb3DQEBBQUAMDIxCzAJBgNV
BAYTAkpQMREwDwYDVQQKEwhtaXhpIEluYzEQMA4GA1UEAxMHbWl4aS5qcDAeFw0x
MTA1MjQwNTMxMTBaFw0xMzA1MjMwNTMxMTBaMDIxCzAJBgNVBAYTAkpQMREwDwYD
VQQKEwhtaXhpIEluYzEQMA4GA1UEAxMHbWl4aS5qcDCCASIwDQYJKoZIhvcNAQEB
BQADggEPADCCAQoCggEBAMbpHo2BGgxSDO9jQmFoWEwscPJV/96LMtBNq7qm3NuD
8vX8Y1zF5VTKzpOhlX9uvOMrmOaWkMnPcQK2WxbocyB6lCF3Ewv41dR3lfR3oVbX
mF9tx+lLDYxyp5qoDzk/aOIgh0YHbwGuWwP8/kCwd2wUuXO6qMEEEOrqIafmGJdZ
KKFWwNSV8h4K1/guP4XK3gwTeiawJzYcKwHM+tMHAZax58HPr7lMbN0DGeeNXjW9
dNKqYjRw9XcTtv9ZQIcSvU+9c/dZHk3cm963vrxvtVsA4V/VSBaf6X0WJ44am//c
954poRVR0TA/4X76ZIgEKT12/H1MVJn4rQsrGtK4U68CAwEAAaOBlDCBkTAdBgNV
HQ4EFgQUVrpcuj6H3rI0IU7ZDBhIC7dCshwwYgYDVR0jBFswWYAUVrpcuj6H3rI0
IU7ZDBhIC7dCshyhNqQ0MDIxCzAJBgNVBAYTAkpQMREwDwYDVQQKEwhtaXhpIElu
YzEQMA4GA1UEAxMHbWl4aS5qcIIJAIzC8GwwTFzxMAwGA1UdEwQFMAMBAf8wDQYJ
KoZIhvcNAQEFBQADggEBAAkOHmJINcm8UEQWWSuYjIiwA/xSuFJKpGqSe3VAn2Gm
4W9seLN14duuu/CsNL31ih1jnSrYtzlOdmVwUOeYi5yhyHNkWtw1wSOQA8i+IFCt
WKXsxYyPblKjsNB9x3VyFSZYw+v41mVFQQGDH4V1JwyJW9Aebffv6oKROTkaIdt/
J5YoB712zHKVm0rZue3eUHdMiSIJLzhR6bL2bKV13wGSeKf7RBX/9lFTSVsyc9MQ
vjAOYWeGFYpup624CGWKPG+PEQe7vaDycaFHd0TPgoxLukUHkZhxvXo+tiweKnwI
WcfqZCQCnoPfIDIoVWFdMw6T9hJLICb5a8f05k1JFoQ=
-----END CERTIFICATE-----

Smartphone

-----BEGIN CERTIFICATE-----
MIIDfDCCAmSgAwIBAgIJALlFXlCiAFLyMA0GCSqGSIb3DQEBBQUAMDIxCzAJBgNV
BAYTAkpQMREwDwYDVQQKEwhtaXhpIEluYzEQMA4GA1UEAxMHbWl4aS5qcDAeFw0x
MTA3MDYwMTE5MjJaFw0xMzA3MDUwMTE5MjJaMDIxCzAJBgNVBAYTAkpQMREwDwYD
VQQKEwhtaXhpIEluYzEQMA4GA1UEAxMHbWl4aS5qcDCCASIwDQYJKoZIhvcNAQEB
BQADggEPADCCAQoCggEBAN21pHE0zoW5NF+0Qd0h10Lc+obTnn6uKV247xezGam5
vP0+729zo0Ch46abF9B5SUIk3/kFfrwWU73UB8j9GJPcx6dN/SB4C/EpYPanbK7N
FohgLPh+uihB3brOfe0fCYQUzfh5lgfzzHyNxR7vE5ErVvQH2YMC1dX0LnE70m3y
+8QTQpq0My2FvttBAZwr2wV4mG/xuvxR3sXtzkTf7DLkRXCcuImMrRd+AI8oi9sG
xfB8ThFekgc9TARVgUiCgC/RNrIWmwh2s7ivCFDRPMfTJlNGTTu10SegS6+1cZgY
93/2fzsIUl86nxaNmLAu3+nzct/364lIwSB9/8hvsiUCAwEAAaOBlDCBkTAdBgNV
HQ4EFgQUqvQ+ztpLlBlv27Tmj+cXZn+7s/0wYgYDVR0jBFswWYAUqvQ+ztpLlBlv
27Tmj+cXZn+7s/2hNqQ0MDIxCzAJBgNVBAYTAkpQMREwDwYDVQQKEwhtaXhpIElu
YzEQMA4GA1UEAxMHbWl4aS5qcIIJALlFXlCiAFLyMAwGA1UdEwQFMAMBAf8wDQYJ
KoZIhvcNAQEFBQADggEBADDwaSXWL755GVQ5hcWEQGAQZFIpK1LSUuup0i2cRwAF
QnQE5cyQcQuy2qE7+dqSz6RHtRW4fnaJygPmpM912xjdG0Hbo/grKbrkVrpa1Hg5
Oi1ffKBUhT9ygttv/FxJDy3d7wqHgQXPT/Qkp1VJE6q24uKDHyEB/FiL01lbgZWm
73pSvRPXTBr2CY21SfPfhLzQoulr4KYx57U9C8BJoNJKXoHgOZ00NbDcc8VyB59H
RPtjxzf6g1yUOuefBoshCryaixWqmIUmv6RcE3ZGB5MCyJi8K3qo0Keo2W7HBH0t
NW1Lho60tFXYbHDeXiYlw3dT+R+al9zojfOUB3sJ/vU=
-----END CERTIFICATE-----

Mobile

You can host the mixi page app at an arbitrary domain.
An example URL for a user to run a mixi page app is as follows.

http://mpa.mixi.net/[page_id]/[module_id]/?url=[URL with escaped characters]
Parameter name Value
page_id mixi page ID
module_id ID used to discriminate when multiple instances of the same app are installed on the mixi page
url App URL. Specify when you want to navigate to a URL other than the Start URL. Specify arbitrary parameters to pass to the app as query parameters. (Example: &uid=1569)

The same as for mixi app mobile, there will be a mixi server proxy between the page application and the mixi platform.
Rendering of the application content will be done by the application server. The mixi proxy server adds the header & footer.
A URL example to send to the application server is as follows.

http://application.server.domain/path?mixi_page_id=123&mixi_module_id=3&mixi_is_owner=false&mixi_is_follower=ture&mixi_viewer_id=21n6bmkduiq7c

The parameters passed to the mixi page app are as follows.

Parameter name Value
mixi_page_id mixi page ID
mixi_module_id ID used to discriminate when multiple instances of the same app are installed on the mixi page
mixi_is_owner true/false if the viewer is the mixi page owner
mixi_is_follower true/false if the viewer is a follower of the mixi page
mixi_viewer_id Viewer's platform ID
※ Only applicable when the mixi page app has obtained r_profile access in the mixi Graph API authentication and authorization.
The parameter names specified above in appParams (Example:uid) The values specified above in appParams (Example: 1569)

The request sent to the application server will be a signed request.
Please be sure to validate the request and make sure that the request is from mixi.

Please refer to 'OAuth Signature validating method' (http://developer.mixi.co.jp/appli/spec/mob/validate-oauth-signature ) (Japanese) for the validation method.

About the test site

The test site allows you to test the app's operation from a PC and is available for the mixi page app mobile version as well as mixi apps.
The test site URL is below.

http://mpa.test.mixi.net/[page_id]/[module_id]/

Please note that there are some restrictions terms for use.

  • Only partner accounts and test accounts can login to the test site.
  • Only the app you developed, or the apps your mixi friends developed can be used.
  • You can't access mixi mobile main pages, such as the home page.
  • You can not test user authorization or navigation to an external site.
  • Browser cookies must be enabled.

Authentication and authorization steps

The authentication and authorization steps for mixi page apps are the same as the existing mixi Graph API authentication and authorization steps (http://developer.mixi.co.jp/connect/en/mixi_graph_api/api_auth) for the most part.

The differences are described below.

Authentication and authorization steps

PC, Smartphone

For PC and Smartphone mixi page apps, user authorization and the Authorization Code can be obtained easily using the Javascript API mixi provides.
Please refer to 'JavaScript API' at (http://developer.mixi.co.jp/page-apps/spec/javascript-api/) for details.

Mobile

To authorize users from a mobile mixi page app, use the UserFlowAPI.
Please refer to 'Mobile UserFlowAPI' (http://developer.mixi.co.jp/en/page-apps/spec/mobile-user-flow-api/) for details.

Obtain an Access Token (Client authorization)

To use an API that doesn't need user authorization, you need to obtain a client authorized access token.
The URI to obtain an access Token is specified below.

POST https://secure.mixi-platform.com/2/token

Include the following parameters in the request body in application/x-www-form-urlencoded format.

Parameter name Value
grant_type "client_credentials"
client_id Consumer key
client_secret Consumer secret

If the parameters are correct, the JSON formatted authorization information will be returned in the response as follows.

{"refresh_token":"391e1188f707bc5d599d53c3f7b13664ba2fc3d3","expires_in":900,"access_token":"5d73a24c593234f17f389d3221225aa635a6a796"}
Parameter name Value
access_token Access Token
refresh_token Refresh token
expires_in Valid period (seconds)

 

TOP OF THIS PAGE