GraphQL APIとのインタラクション
GraphQL APIとのインタラクションユーザー認証

ユーザー認証

実行するGraphQLクエリは、たとえば投稿を作成するミューテーションを実行するために、ユーザーがログインしていることを要求する場合があります。

ユーザーを認証する方法はいくつかあります。

WordPressの認証済みセッションのクッキーを使用する

WordPressはクッキーベースのユーザー認証を使用しているため、WordPressサイトにログインしている状態であれば、GraphiQLクライアントを開いてそこからGraphQLクエリを実行するだけで十分です。

GraphQLリクエストに送信されるクッキーはWordPressサイトのものと同じであるため、ユーザーはすでにログインした状態になります。

wp-admin内のGraphiQLクライアント
wp-admin内のGraphiQLクライアント

loginUser ミューテーション

必要なミューテーションを実行する同じGraphQLクエリの中で、loginUser ミューテーションを使用してユーザーを認証できます。

順序が重要であることに注意してください。loginUser は他のミューテーション(この場合は createPost)より前に追加する必要があります。

mutation {
  loginUser(
    by: {
      credentials: {
        usernameOrEmail: "myusername",
        password: "mypassword"
      }
    }
  ) {
    status
    errors {
      __typename
      ...on ErrorPayload {
        message
      }
      ...on GenericErrorPayload {
        code
      }
    }
    userID
  }
 
  createPost(input: {
    title: "Hello world!"
    contentAs: {
      html: "<p>How are you?</p>"
    }
  }) {
    status
    errors {
      __typename
      ...on ErrorPayload {
        message
      }
    }
    post {
      id
      title
      content
    }
  }
}

Application Passwords

WordPress の Application Passwords を使用して、GraphQLエンドポイントに認証済みリクエストを送信できます。

たとえば、USERNAMEPASSWORD の値を置き換えて、GraphQLサーバーに対して curl コマンドを実行する際にアプリケーションパスワードを渡すことができます。

curl -i \
  --user "USERNAME:PASSWORD" \
  -X POST \
  -H "Content-Type: application/json" \
  -d '{"query": "{ me { name } }"}' \
  https://mysite.com/graphql

Gato GraphQL を使用して、別のWordPressサイトに対して認証済みHTTPリクエストを実行できます。

以下のクエリは、ユーザー名とアプリケーションパスワード(および接続先のエンドポイント)を受け取り、必要な認証ヘッダーを作成して、外部GraphQLサーバーに対してクエリを実行します。

query GetDataFromExternalWPSite(
  $username: String!
  $appPassword: String!
  $endpoint: URL!
) {
  loginCredentials: _sprintf(
    string: "%s:%s",
    values: [$username, $appPassword]
  )
    @remove
 
  base64EncodedLoginCredentials: _strBase64Encode(
    string: $__loginCredentials
  )
    @remove
 
  loginCredentialsHeaderValue: _sprintf(
    string: "Basic %s",
    values: [$__base64EncodedLoginCredentials]
  )
    @remove
 
  externalHTTPRequestWithUserPassword: _sendGraphQLHTTPRequest(input:{
    endpoint: $endpoint,
    query: """
  
{
  me {
    name
  }
}
 
    """,
    options: {
      headers: [
        {
          name: "Authorization",
          value: $__loginCredentialsHeaderValue
        }
      ]
    }
  })
}