🔑

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

2022/11/04に公開

React

他サービスの認証 (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」の項目が有効のままである場合は、無効に戻します。