GraphQL PlaygroundをGCPのIAP認証効かせたまま使う方法

Apolloを使ってGraphQLのAPIを作っていたときにGraphQLのPlaygroundがエラーでどうにも動かなくてはまったので、解決方法を共有します。

 

www.apollographql.com

 

状況

Node.jsにApollo ServerをインストールしてAPIのベースを作りました。クライアント(WEB UI)はApollo Clientを使いました。ローカル環境では正常に動いていて、クライアントと正常に通信できているし、もちろんPlaygroundを使ってAPIにリクエストを送ってレスポンスを受け取ることもできていました。

 

ベースが整ったのでクライアントはGoogle Cloud PlatformのApp Engineスタンダード環境に、APIはフレキシブル環境にデプロイしました。使ったDockerfileはシンプルなNode.jsイメージのものです。

 

ただ一つ要件があり、GCPIAPを使って認証の仕組みをクライアントとAPIに持たせる必要がありました。IAPを簡単に説明すると、Googleアカウントを使って認証するマネジメントサービスです。GCPの管理画面上で簡単にできるので問題なく設定はでき、クライアントをブラウザから開くとGoogleの認証画面に飛ばされ、許可されたメールアドレスでログインするとアクセスすることができました。APIもPlayground(/graphql)に同様の手順でアクセスすることはできました。

 

エラー発生 

アクセスすることはできたんですが、以下のエラーが出て何もリクエストを実行できません。

 

Unexpected token < in JSON at position 0

 

f:id:b1840943:20191204223816p:plain

 

クライアントとAPIの通信状態は何回も繰り返しチェックしましたが問題ありませんでした。原因がわからずかなりハマったんですが、このエラーは以下の方法で解決できます。

 

解決方法

まずタブに表示されている「Setting」をクリックして設定画面に行きます。そうするとJSON形式で設定が表示されるので、以下の設定を変更してください。

 

"request.credentials": "omit",

 

 

"request.credentials": "include",

 

デフォルトの設定だとヘッダーの秘匿情報をドロップしてしまうようでうまく動かないみたいなんですが、この設定を入れることでちゃんとクレデンシャルを認識してくれて、無事動くようになりました。