Twitch拡張EBS用のNetlifyクイック展開

この記事は、複数の拡張シリーズの作成を歩いて、マルチパートシリーズの最初のです.最初の部分のために、ゴールはNetlifyの上でEBSを主催することです.
プロジェクトに直接移動するには、github.com/shrmpy/pavlok
要件

Netlifyアカウント

ファウナDBアカウント

ひよこ拡大登録

Pavlokアプリ登録

discord webhook (オプション)

一歩
技術的には、ステップゼロが必要だからGitHub/GitLab アカウント.それで、あなたがすでに1を持っていないならば、最初にサインアップしてください、そして、あなたはそうするOAuthログインとしてそのアカウントを使うことができますstep #1 .

無料のアカウントにサインアップNetlify .

無料のアカウントにサインアップFauna DB OAuthを使用してNetLifyアカウントの資格情報を使用します.

新しいアカウントが開かれた後、データベースキーを作成しますexample . 具体的に

a. Create a database

In the Fauna Cloud Console:

• Click “New Database”
• Enter “Netlify” as the “Database Name”
• Click “Save”

b. Create a database access key

In the Fauna Cloud Console:

• Click “Security” in the left navigation
• Click “New Key”
• Make sure that the “Database” field is set to “Netlify”
• Make sure that the “Role” field is set to “Admin”
• Enter “Netlify” as the “Key Name”
• Click “Save”

c. Copy the database access key’s secret

Save the secret somewhere safe; you won’t get a second chance to see it.

あなたのtwitch拡張をdev guide . 具体的に

Configure the Extension
Configuring an Extension requires a few steps:

• Visit https://dev.twitch.tv/console/extensions, and click Create Extension.
• Type a unique name for your new Extension.
• Pick a type for your Extension. For this example, we’ll use a Panel Extension.
• Fill in any optional fields you choose.
• After filling in the optional fields, click Create Extension Version. You now have an extension!

新しいエクステンションの秘密をStep 2: JWT Secret . 具体的には

Concept: Each Extension maintains a shared secret that is used to sign tokens that validate the identity of users. Extension Secret is base64 encoded and is provided to you by the Extension Manager.

To retrieve the secret, lets go to the Extension Manager. To get to the Manager, go to the console, select a version of the Extension and click Manage. Once on this page, you will see the default status page. On the top right of the manager, click the Extension Settings button. You will see the following page:

Under the Extension Client Configuration section, copy the key provided. We need to use this key to verify that the token provided is signed with the same secret.

無料アカウントにサインアップするPavlok . アカウントが開きました.register your Pavlok app . 先の手順と同様に、クライアントIDとクライアントの秘密を配置中に後で使用する必要があります.彼らdocs OAuthプロセスについて詳細に説明してください.私たちの目的のために、“リダイレクトURI”エントリはプレースホルダの値として開始することができますhttp://localhost:8080 . netlifyが正常に配備された後に真の値が利用できるようになります.ここでは、"callback url "フィールドの書式を示しますhttps://randomized-phrase.netlify.app/api/pavlok/callback . ランダム化されたフレーズは、終了時にホスト名netlifyが作成されます.だから、このPavlokアプリのページに戻り、最終的なURLを入力する必要があります.
(オプション)support doc . 具体的に

1) Open your Server Settings and head into the Integrations tab:
2) Click the "Create Webhook" button to create a new webhook!

You'll have a few options here. You can:

• Edit the avatar: By clicking the avatar next to the Name in the top left
• Choose what channel the Webhook posts to: By selecting the desired text channel in the dropdown menu.
• Name your Webhook: Good for distinguishing multiple webhooks for multiple different services.

ランQuick Deploy netlifyでホストする

GitTubまたはGitLabのいずれかをリポジトリに選択すると、プロンプトは環境変数の設定を一覧表示します.フィールドを前の手順から対応するキーに一致します.

OAuth状態フィールドを暗号化する際に使用する秘密の句
することができます任意のランダムなテキストを選択します.EBSによって内部で使用され、UIでは決して表示されません.

不協和音:
(オプション)step #4b

Twitch拡張マネージャからの秘密
秘密step #3

ファウナDBアカウントからの秘密
秘密step #2

Githubアバター:
(任意) GitHubアカウントのプロファイルアイコン.

PavlokアプリケーションクライアントID :
クライアントIDstep #4a

Pavlokアプリの秘密:
秘密step #4a

Pavlokリダイレクト
用途http://localhost:8080 今のところ.展開が完了したら、NetLifyサイトビルド環境変数ページ内に変更します.そして、/api/pavlok/callback

テスト

curl -H "Accept: application/json" netlify-deploy-url/api/pavlok/auth

どこnetlify-deploy-url の結果は、step #5 . テストは、サービスが応答したことを検証しますAuthorization ヘッダが見つからない.実際にもっと見るには、次の拡張機能のフロントエンドを試すことができます.

エンドツーエンド
この時点で、EBSはライブですが、私たちはUIを持っていません.フロントエンドは、フルトリップエンドツーエンドを示します.フロントエンドで作業を続行するには、パート2を試してください.

メモ、レッスン、モノローグ

なぜ別のEBS?EBSの位置を視覚化するために、シーケンス図は1つのフローを示しています.パネル/twitchを含んでいる左側の上でチョップするならば、それはTwitchiframe と関連する制限.これは特に初期の実験でいくつかのテストが容易になります.これは、私がtwitch開発者リグを使用していなかったからでもありました.Twitchは拡張子を単にWebページとしてhelper 輸入されて、私はそれを追求して、後で「学習」を延期することを望みました.
なぜ3(Auth/コールバック/ショック)ルート?トラブルシューティングと学習とテスト.私が言うことができたとき、概念はより明白でした/auth , コールバックは/callback , を理解するとき、それはより明白になりましたstate フィールドと、連続性を確認する方法を尋ねます.リファクタリングは、重複したコードをクリーンアップします.
なぜパネルはPavlokのログインページに直接リンクしないのですか?これは主に便利なので、パネルはハイパーリンクを構築するのに必要なPavlokフィールドを維持しません.EBSは重いリフティングを行いますURL そして、ポップアップウィンドウを起動するためにパネルに戻ります.副作用は、パネルが薄くとどまることができるということです(そして、プレゼンテーション層モジュールに信頼しています).
薄型パネルはなぜ良いのか?これは、請求項のメタデータを含んでいるWitch JWTトークンからのもう一つの幸せな事故です.これは、要求にデータを追加することを避けることができました.The Authorization ヘッダーは、要求が信頼できるユーザーからあることを確認するためにEBSに必要です.それから、ヘッダーからのトークンはchannel ID . 多分、これはトークンをオーバーロードするかもしれません、しかし、現在、それはパネルを最小にして、より複雑にしません.
なぜNetlify?Serverless(我々の最後のワークステーションは、バッテリー故障に苦しみました).ゴランサポート.ビルド時間は、トラブルシューティングのために役に立つログ出力で速いです.抄録AESラムダ(いくつかの複雑さから私たちを保護します).
動物相DB?Twitch設定サービスが既にキー/値ストアとして利用可能です.Netlifyと動物相の間の良い支持は他の選択肢をより低い選択にします、しかし、主要な利点はさえずる依存なしでテストしています.我々はまだEBSベースのURLを格納するためにtwitch設定サービスを使用しますこれは拡張モジュールのインストールを少し非友好的にしますが、それは我々がフロントエンドにURLをハードコードすることを避けることができます.
なぜPavlok?Pavlok APIは、このTwitch拡張の機能的な部分ですが、それは統合の実世界の例として見ることができます.OAuth 2との異なるサードパーティAPIは非常に類似したインターフェースを持つべきです.
なぜ不和?discord webhookオプションですが、それは非常にAPIの結果を観察するのに役立ちます.Pavlokデバイスなしでテストするので、API呼び出しが電気ショックを届けることができないことを意味します.したがって、DiscodWebhookを使用すると、APIの呼び出しをログ出力する2つの目的だけでなく、接続が外部システムに確立されていることを確認します.