🔑

[Part 5] Canva APIを使ったアプリ作成 事始め

2022/11/04に公開

Part 4はこちら👇です。
https://zenn.dev/aninomiya/articles/3e986fb01a3ae2

他サービスの認証 (Authentication)

この記事では、新Canva APIの5種類の機能のうち、「他サービスの認証 (Authentication)」について、サンプルを使って詳細をみていきたいと思います。

  • 👉他サービスの認証 (Authentication)
  • 一括作成用のデータ作成 (Data Provider)
  • 要素の追加・更新 (Design Interaction)
  • ドラッグ & ドロップ (Drag & Drop)
  • 他サービスとの連携 (Fetch)

Canva API ドキュメント

認証フロー

他サービスと連携をする際、認証があることによって、例えば、ユーザ自身のコンテンツにアクセスしたり、プレミアム機能を利用することが可能になります。

Canva APIでの認証フローは下記のようになっています。

  • ユーザーが認証フローを開始する
  • Canvaにてポップアップウィンドウを開く
  • ポップアップウィンドウの中で、ユーザーが他サービスの認証を行う
  • 認証が通ったら、ポップアップウィンドウを閉じる
  • ログインした状態でアプリの利用する (認証に失敗した場合はエラーが表示される)

サンプルアプリを参考に、詳細をみていきたいと思います。

サンプルアプリ

Canvaのスターターキットの認証に関するサンプルアプリは下記になります。

  • authentication

ngrok

これまでであれば、下記のようにサンプルアプリを起動していましたが、

npm start authentication

今回は、下記のように起動します。

npm start authentication --ngrok

ngrokは、ローカルで動いているサーバを外部公開するサービスです。

Canvaからバックエンドにリクエストを送信する際は、バックエンドURLが公開されている必要がありますが、これを行う最も簡単な方法が、ngrokを使用することです。

スターターキットでは、npm startのオプションに--ngrokを追加すれば、ngrokを利用して公開URLを発行してくれます。

上記のコマンドを実行すると、アプリは https://localhost:8080 、バックエンドは https://random-subdomain-name.ngrok.io で動くようになっています。(※バックエンドのURLはランダムに発行されるので、実際の値はNode.jsのコンソールに出力されるログをご確認ください。)

ngrokのアカウント作成とAuthtokenの設定

ngrokの設定を行わないと、バックエンドにアクセスした時に下記のような画面になってしまうため、アカウントがない場合はアカウントを作成し、Authtokenを設定する必要があります。

ngrokのアカウントの作成はこちらから行えます。
https://dashboard.ngrok.com/signup

Authtokenの設定方法は色々あるかと思いますが、私はスターターキットの/scripts/start.jsファイルを下記のように書き換えました。

- await ngrok.connect(process.env.BACKEND_PORT)
+ await ngrok.connect({
+      authtoken: process.env.NGROK_AUTHTOKEN,
+      addr: process.env.BACKEND_PORT
+  })

アプリの設定

ngrokの設定に加え、Canva Developer Portalでアプリの設定も変更する必要があります。

「Base URL」という項目にngrokで発行されたURLを、「Endpoint allowlist」という項目にこのサンプルアプリの/backend/server.jsで定義されているエンドポイントを追加します。
※また、もし「Data Provider」の項目が有効のままである場合は、無効に戻します。

さらに、「Add authentication」というタブをクリックし、「Redirect URL」と「Authentication base URL」も設定します。

これでアプリの設定は完了です。

画面

Canvaにアクセスしてみると、下記のような画面が表示されます。

「Start authentication flow」をクリックすると、別ウィンドウが開き、ログイン情報を入力する画面が表示されます。前の画面の説明通りに、「ユーザ名」にuser、「パスワード」にpasswordを入力すると、ログインすることができます。

「You are authenticated!」と表示され、ログインすることができました🎉

このように、認証機能を使って外部サービスとの認証を行えます。この機能を使うことで、ユーザ自身のコンテンツへのアクセスや、有料アプリの実装等も可能になります。

[重要] 念のため、サンプルアプリの挙動を確認できたら、ローカルのサーバは停止しておきましょう。ngrokで外部に公開されている状態で放置すると、悪意のあるユーザからアクセスされてしまうかもしれません。

まとめ

他サービスの認証 (Authentication) についてまとめました。次の記事では、他サービスとのどのように連携することがきるのか (Fetch) についてみていきたいと思います。

Part 6はこちら👇です。
https://zenn.dev/aninomiya/articles/8e8c99291d5704

Discussion