GraphQLでJWT/Cookieを発行

Question

私はフロントエンドとしてReactを使用しており、バックエンドとしてREST APIを使用しています.RESTはHTTPのみを発行していますCookieフロントエンドに保存しているすべてのRESTリクエストで使用します。例えば、Atlassian JIRA have auth like thatそのソリューションをRESTからGraphQLに移行し、GraphQL側の権限が既に解決されていれば（CookieとJWTの両方の認証メカニズムを持っているApolloだけですが）、Cookie/JWTの発行方法はまだ分かりませんGraphQL側から

GraphQLから私にクッキーを提供する可能性はありますか？質問は、GraphQLがクライアント上で新しいクッキーを設定する方法ですか？セットクッキーヘッダーのようなものが可能ですか？

Answer 1

別個の認証エンドポイントを避け、代わりにGraphQLエンドポイントに突然変異を送信して認可クッキーを生成できるようにするには、GraphQLエンドポイントの設定方法を変更する必要がありますサーバー。

express-graphqlまたはapollo-server-expressを使用する場合、リクエストオブジェクトはデフォルトでコンテキストとしてリゾルバに渡されます。あなたの応答オブジェクトを取得するためには、このようなあなたのエンドポイントをラップする必要があります。その突然変異のためにリゾルバ内

app.use('/graphql', (req, res) => { 
    return graphqlHTTP({ 
    schema, 
    context: { req, res }, 
    })(req, res); 
); 

、あなたはその後、res.cookie()を使ってクッキーを設定することができます。

このように処理することは苦労する可能性があります.1つ以上の別個のエンドポイントを認証に使用したい場合は、passportのようなライブラリを活用して重い作業を行うことができます。

Answer 2

既存のトークンをGraphQLクエリまたは突然変異に渡すには、クエリ/突然変異内のvariablesオブジェクトにトークンを割り当てる必要があります。

ここでは、Apolloのgraphql Higher Order Componentを使用し、Reduxストアからトークンを抽出する例を示します。ここでは、ライブラリreact-router-reduxと連携して動作するブランチqueryParamsを分解して、アクティブURLのクエリパラメータを自動的に抽出してreduxストアに保存します。

const FetchTrackingInfo = gql` 
 
    query FetchTrackingInfo($token: String!) { // create a $token variable reference and declare the Scalar type. 
 
    FetchTrackingInfo(token: $token) { // assign a token parameter to the variable $token 
 
     error { 
 
     hard 
 
     soft 
 
     message 
 
     } 
 
     shipDate 
 
     orderId 
 
     trackingNumber 
 
     trackingInfo { 
 
     location 
 
     date 
 
     activity 
 
     } 
 
    } 
 
    } 
 
`; 
 

 
const OrderTrackingWithData = graphql(
 
    FetchTrackingInfo, { 
 
    name: 'TrackingInfo', 
 
    options: ({ queryParams }) => { // destructuring queryParams from the redux store. 
 
     const token = queryParams.token ? queryParams.token : ''; 
 

 
     return ({ 
 
     variables: { token }, // assign token to the variables of the query/mutation. 
 
     }); 
 
    }, 
 
    }, 
 
)(OrderTracking); // Pass in your React component to the HOC: graphql

、あなたが「Graphql側からクッキー/ JWTを発行する方法」と言うと、クライアントからのJWTトークンを作成しようとしているわけさて、もし、これが潜在的ですあなたのアプリのセキュリティ上の欠陥。 JWTはトークンの署名/作成時にSecretが必要です。通常、これはセキュリティ上の理由から環境変数を介して利用可能になります。クライアント側のブラウザは、すべての環境変数を公開します。つまり、クライアント側から新しいJWTトークンを作成/発行することは、悪い習慣であり、最悪の場合、巨大なセキュリティ上の欠陥です。