AMP loginをちょっとだけ試したときのメモ、あるいはAMP loginのレスポンスの注意点

私が期待知続けているAMP技術のlogin周りを試してみました。まぁ試しただけで殆ど何もできてないんですがメモ。

www.ampproject.org

AMPのlogin機能でできることの大体は、HTMLの特定の要素の表示非表示のようです。やるべきことはampのログイン機能用のスクリプトのimportの記述、ログイン機能用の設定の記述、そして何よりもAuthorizationのレスポンスを返すサーバの用意です。

まぁimportについては適当にコピればいいです。認証やらログインやらの設定周りをscriptタグで記述します。localhost:8080を認証サーバとして適当に建てた時の適当なサンプルはこんな感じです。

<script id="amp-access" type="application/json">
        {
            "authorization": "http://localhost:8080/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
            "noPingback": "true",
            "login": {
              "sign-in": "http://localhost:8080/login?rid=READER_ID&url=CANONICAL_URL",
              "sign-out": "http://localhost:8080/logout"
            },
            "authorizationFallbackResponse": {
                "error": true,
                "loggedIn": false
            }
        }
</script>

scriptのid部分がまずamp login機能を使って表示非表示にする要素の属性の名前になるみたいです。中身は色々書いてますがかなーり適当で、authorizationとauthorizationFallbackResponse以外実質つかってないです。あとauthorizationのurlもhttp://localhost:8080以外意味ないです。すんません。

この設定でamp-access属性を記述した要素をログインの成否で表示/非表示できるようです。例えばこんな感じ。

<span amp-access="NOT loggedIn" role="button" tabindex="0" amp-access-hide>
  <h2 class="m1">Please login to comment</h2>
   <button on="tap:amp-access.login-sign-in" class="ampstart-btn mx1 mt1 caps">Login</button>
</span>

上の例ではログインできていない状態だとspan要素が非表示になります。

これでページを開くと、設定のauthorizationのURLにリクエストが走り、返ってきたJSONの中身を見て、loggedIn: trueが入っていれば認証が成功したとみなすようです。

そこでとりあえず必ずloggedIn: trueを返す鯖を用意したんですが、わりとUndocumentedなことが多かったというのが今回のメモの本題です。

今回は直接ファイルを開いたときに認証させてみたので、CORSの設定が必要でした。実際にAMPを使う場合はampproject.comから開くことが多いでしょうから結局CORSの設定は必要になるでしょう。ヘッダーに、

Access-Control-Allow-Origin: "null"
Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept"

を付与します。注意点は、Access-Control-Allow-Origin: "*"は使えないということです。ampのスクリプトがセキュリティ的に駄目だということで弾いてしまいます。

で、ドキュメントだけ見ればこれでいいんですが、実は他に色々とヘッダーが必要です。以下のように。

Access-Control-Allow-Credentials: true
access-control-expose-headers: 'AMP-Access-Control-Allow-Source-Origin'
amp-access-control-allow-source-origin:  'file://'

まず、Access-Control-Allow-Credentials: trueが必須です。単純に認証を行うAPIであることを示すのにこのヘッダが必要なようです。その他にAMP用のヘッダがまだ2つも必要です。
1. access-control-expose-headersで AMP-Access-Control-Allow-Source-Origin を指定して該当ヘッダを見るようにする
2. amp-access-control-allow-source-originで認証元のhtmlファイルのoriginを指定する。

これらを経てようやく認証が成功し、要素が消えることを確認できました。
gistはこちらです。

gist.github.com

AMPは色々と夢が広がるんですが、まだまだドキュメントが少なくて色々厳しいんですよねえ… はよう本なりなんなり出てくれると嬉しいです。