アカウントサービス

16917 ワード
appwrite javascript html テキストリンク

導入
次の記事では、サンプルプロジェクトを使用してAppWriteのアカウントサービスについて説明します.アカウントサービスは、AppWriteアプリケーションのユーザーを認証するために使用できます.さらに、アカウントサービスは、認証されたユーザーのユーザー情報を管理するために使用することができます.多くの異なるメソッドが認証のために提供されます.この記事はAppWrite Web SDKを使用して簡単な電子メール/パスワードの検証をカバーしています.

アカウント対ユーザーサービス
AppWriteアカウントサービスはAppWriteユーザーサービスと同じです.アカウントサービスは、ログインしているユーザーの領域でのみ動作しますが、ユーザーサービスはAppWrite APIキーを使用しているため、すべてのAppWriteユーザーに完全にアクセスできます.

プロジェクト創造
他のすべてのappwriteリソースのように、ユーザーは特定のプロジェクトに縛られます.したがって、この記事では、最初にappwriteコンソールに新しいプロジェクトを作成します.AppWriteコンソールはインストール後にアクセスできます(Installation - Appwrite Docs ) ブラウザと対応するドメイン/ポートを介して.

さて、AppWrite Web SDKがAppWriteのさまざまなインターフェイスにアクセスするためには、プラットフォームをプロジェクトに追加する必要があります.プロジェクトのホームページにプラットフォームを追加すると、新しいWebアプリケーションが選択され、プラットフォームの名前とホスト名が入力されます.ホスト名がAppwrite APIにアクセスされるドメインに対応することが重要です.


AppWrite Web SDKで始まる
AppWriteアカウントサービスの原則を示すために、簡単なサンプルアプリケーションは、HTMLとJavaScriptを使用して作成されます.紹介で言及したように、appwriteは多くの異なるSDKを提供します.フロントエンドのWebアプリケーションのための古典的なSDKは、Web SDKです.
次の例のフレームワークは2つのファイルから構成されます.最初のファイルindex.html ) アプリケーションと2番目のインターフェイスについて説明します.script.js ) AppWrite APIにアクセスするコードが含まれます.
Web SDKを含める方法はいくつかあります.その一つは、コンテンツ配信ネットワークを介してそれを含めることです.これは単にHTMLファイルに以下のスクリプトタグを追加することで行われます.
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
ファイルの全体構造index.html 以下のようになります.
<html>
    <body>

    </body>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="script.js"></script>
</html>
現在SDKはJavaScriptでアクセスできます.しかし、アカウントサービスを使用する前に、SDKを初期化しなければなりません.
インscript.js :
const sdk = new Appwrite();

sdk
    .setEndpoint('[APPWRITE-API-ENDPOINT]')
    .setProject('[APPWRITE-PROJECT-ID]')
;
の値[APPWRITE-API-ENDPOINT] and [APPWRITE-PROJECT-ID] 環境に合わせて調整しなければなりません.エンドポイントとプロジェクトIDは、AppWriteコンソールのAppWriteプロジェクトの設定で確認できます.

アカウントを作成する
すべての必要な条件が適所にある今、最初のユーザーはつくられることができます.
インscript.js :
async function createAccount(){
try {
         let response = await sdk.account.create('[EMAIL]', '[PASSWORD]', '[NAME]');
            console.log(response);
    } catch (error) {
         console.error(error);
    }
}
最初の二つの引数sdk.account.create が必要です.名前を指定する必要はありません.作成を実行するには、HTMLボタンが作成された関数に関連付けられます.
インindex.html :
...
<body>
        <button onclick="createAccount()">Create Account</button>
</body>
...
静的なファイルのための単純なHTTPサーバは、アプリケーションを実行するのに十分です.これは、迅速かつ容易にPythonで達成することができます.以下のコマンドをindex.html ファイルpython -m http.server 8080 . これはポート8080のローカルサーバを起動し、http://localhost:8080 . さて、Create Accountボタンを初めてクリックすると、ブラウザコンソールでレスポンスが表示されます.新しいユーザーが実際に作成されたことを確認するには、AppWriteコンソールのユーザータブを開くことができます.新しいユーザーがここに表示されます.

ボタンが再びクリックされると、既にアカウントが存在するエラーメッセージがコンソールに表示されます.実際のアプリケーションでは、電子メール、ユーザ名とパスワードはもちろん、ユーザーから対話的に要求され、コードで永久的に定義される必要はありません.

アカウントへのログイン
ために作成されたユーザーアカウントにログインするには、新しい機能は、電子メール/パスワードの組み合わせで新しいセッションを作成する作成されます.
インscript.js :
async function login(){
    try {
            let response = await sdk.account.createSession('[EMAIL]', '[PASSWORD]');
            console.log(response);
    } catch (error) {
            console.error(error);
    }
}
この関数は、再びHTMLボタンにバインドされます.
…
<body>
        ...
        <button onclick="login()">Login</button>
</body>
...
ログインが現在クリックされるならば、レスポンスはブラウザーコンソールで示されなければなりません.これはユーザがログインしていることを意味します.これはappwriteコンソールで確認できます.これでユーザーセッションの下に新しいセッションが表示されます.


現在のアカウントからのログアウト
ユーザーがログインした後、彼はもちろん再びログアウトすることができます.この目的のため、シンプルなJavaScript機能を再度作成されます.
インscript.js :
async function logout(){
    try {
            let response = await sdk.account.deleteSession('current');
            console.log(response);
    } catch (error) {
            console.error(error);
    }
}
パラメータsdk.account.deleteSession 関数は、特定のセッションIDまたは単に現在のいずれかです.この場合、現在のセッションは削除され、ユーザーは現在のシステムからログアウトします.再び、新しいボタンが作成されます.
...
<body>
        ...
        <button onclick="logout()">Logout</button>
</body>
...

アカウント情報取得
ログインしているユーザに関するさまざまな情報を得るにはsdk.account.get を使用できます.サンプルアプリケーションの対応する関数は次のようになります.
インscript.js :
async function getAccount(){
    try{
            let account = await sdk.account.get();
            console.log(account);
    } catch (error) {
            console.error(error);
    }
}
とindex.html :
...
<body>
        ...
        <button onclick="getAccount()">Get Current Account</button>
</body>
...
ログインしているユーザークリックが現在のアカウントを取得すると、ブラウザのコンソールにそのユーザーに関するさまざまな情報が表示されます.

更新ユーザ名
すべての以前の機能と同様に、この1つも構造上、非常に似ています.
インscript.js :
async function updateName(){
    try {
            let response = await sdk.account.updateName('[NEWNAME]');
            console.log(response);
    } catch (error) {
            console.error(error);
    }
}
インindex.html :
…
<body>
        ...
        <button onclick="updateName()">Update Username</button>
</body>
...
UPDATE USERNAMEボタンをクリックすると、アカウント名が変更されたことをブラウザコンソールで確認するために再度アカウントをクリックできます.

アカウント削除
また、AppWriteアカウントサービスを介して自分のアカウントを削除することも可能です.この場合、アカウントのすべてのアクセスがブロックされますが、ユーザーのドキュメントやファイルはそのままで削除できます.
コードは次のようになっている.
async function deleteAccount() {
    try {
            let response = await sdk.account.delete();
            console.log(response);
    } catch (error) {
            console.error(error);
    }
}
インindex.html :
...
<body>
        ...
        <button onclick="deleteAccount()">Delete Account</button>
</body>
...
削除アカウントをクリックした後、ログインはもはや可能です.AppWriteコンソールでは、アカウントがブロックされて表示され、そこから再起動できます.


結論とさらなる情報
この記事はAppWriteアカウントサービスによって提供される多くの機能のほんの一部を示しました.詳細な情報は以下のリンクにあります.
  • Account API - Appwrite Docs
  • Getting Started for Web - Appwrite Docs
    • Mantisの問題解決をインストールします.
    12. c++ STL tuple