Support

Reactコンポーネント

React コンポーネント SDK

The Login with DIMO React Component SDK provides developers with a set of pre-built, customizable building blocks for applications that integrate with DIMO. These components simplify the process of integrating our Accounts API and Transactions SDK in React applications.

Logonpm: @dimo-network/login-with-dimonpm

SDKの使用

1

インストール

npm install @dimo-network/login-with-dimo
2

初期化

import { 
  initializeDimoSDK, 
  useDimoAuthState
} from "@dimo-network/login-with-dimo";

// Initialize the State Variables
const { 
  isAuthenticated, 
  getValidJWT, 
  email, 
  walletAddress, 
  getEmail 
} = useDimoAuthState();

// Initialize the SDK
initializeDimoSDK({
  clientId: "<dev_license_clientId>",
  redirectUri: "<dev_license_redirectUri>",
  // OPTIONAL
  // apiKey: "<dev_license_apiKey>",
  // environment: "<environment>", 
  // options: {
  //    forceEmail: true, //BY DEFAULT, this is False - users won't have to share email
  // }
});
パラメータ
タイプ
詳細

clientId*

String

A valid client ID registered with your Developer License.

redirectUri*

String

A valid redirect URI registered with your Developer License.

apiKey

String

Optional API key of your Developer License. This is currently not in use and reserved for future applications.

environment

String

Environment where your app is registered to. Defaults to production if not indicated. Supports development or production at the moment.

options

Object

Additional options for the Login with DIMO Component. Currently supports forceEmail:true, which requires users to opt into email sharing when logging in. If excluded, defaults to optional email sharing on login.

3

コンポーネントをインポートする

import { 
    LoginWithDimo, 
    ShareVehiclesWithDimo,
    LogoutWithDimo,
    ExecuteAdvancedTransactionWithDimo
} from "@dimo-network/login-with-dimo";

React アプリで、必要に応じてさまざまなコンポーネントをインポートし、次の入力構成を使用して目的のコンポーネントをドロップします。

4

コンポーネントを構成する

表面化させるコンポーネントに応じて、次の入力から選択します。

Inputs for LoginWithDimo & ShareVehiclesWithDimo

パラメータ
タイプ
詳細

mode*

String

One of the two available modes: popup or redirect.

onSuccess*

Callback

Callback function called when the authData is returned for popup mode. Example for authData: { token: <access_token> } For redirect mode, the access_token is in the redirect URI. Example for redirect: https://your-site.com/redirect?token=<access_token>&email=<user_email>

onError*

Callback

Callback function called when error occurs.

permissions

String

Optional binary string in replacement of permissionTemplateId.

  • Each digit represents whether a specific privilege is granted (1) or not granted (0).

  • The position of the digit corresponds to the privilege number (from left to right).

Example mapping:

  • "001" → Grants 3 only

  • "1011" → Grants 1, 3, and 4

  • "1111" → Grants 1, 2, 3, and 4

  • "11111111" → Grants 1 through 8

Notes:

  • The leftmost digit corresponds to privilege 1.

  • You can pad the string to match the total number of privileges supported.

For ShareVehiclesWithDimo component, either permissions or permissionTemplateId is required as sharing requires permission templates.

permissionTemplateId

String

Optional template ID of the SACD permissions template on IPFS. For ShareVehiclesWithDimo component, either permissions or permissionTemplateId is required as sharing requires permission templates.

utm

String

Optional parameter for configuring UTMs. Useful for campaign tracking. Example: <LoginWithDimo utm="utm_campaign=dimo" /> will redirect to: https://redirecturi.com/?utm_campaign=dimo

vehicles

[String]

Optional array of vehicle tokenId's to target for the logged in user. If vehicles is not provided, the flow will pull all available vehicles. This also filters out any vehicle tokenId that doesn't belong to the signed-in user.

vehicleMakes

[String]

Optional array of vehicle makes to filter for compatibility with your app. If vehicleMakes is not provided, all available vehicles will be marked as compatible. Example: [ 'Tesla', 'Audi', 'Lexus' ]

powertrainTypes

[String]

Optional array of powertrain types to filter for compatibility with your app. If powertrainTypes is not provided, all vehicle types will be marked as compatible. Example: ['BEV', 'HEV', 'PHEV', 'ICE', 'FCEV']

expirationDate

[String]

Optional parameter to explicitly specify an expiration date for permissions in the ISO8601 format (YYYY-MM-DD).

authenticatedLabel

[String]

Optional parameter to override default button label text for authenticated users.

unAuthenticatedLabel

[String]

Optional parameter to override default button label text for unauthenticated users.

For more information on these inputs, see: Core Functionalities

Inputs for ExecuteAdvancedTransactionWithDimo

パラメータ
タイプ
詳細

mode*

String

One of the two available modes: popup or redirect.

onSuccess*

Callback

Callback function called when data is returned for popup mode. Example: data: { token: <access_token>; transactionHash: <tx_hash>; transactionReceipt: <tx_receipt>; }

onError*

Callback

Callback function called when error occurs.

address*

String

The 0x address of the smart contract being executed.

abi*

Any

An array of JSON representing the ABI of the advanced functions of interest.

functionName*

String

The name of the function being called.

args*

[String]

The arguments being passed into the function call.

value

String

Optional number in wei of the native currency sent as a part of the transaction.

5

アプリを構築する

このステップに到達したら、あとはアプリの構築を完了し、コンポーネントを操作するだけです。ユーザーにどのような画面を見せたいかに応じて、必要に応じて設定を変更してください。

6

完成です🎉

このステップに到達しましたことをお祝い申し上げます。DIMO との統合の開始に大きく近づきました。

次のステップ:

ここまで進めば、DIMOを使用したログインの設定は完了です。ユーザーがアクセスを共有した後で車両データにアクセスするには、バックエンドで データSDK を使用して実装することをお勧めします。ユーザーがLoginコンポーネント経由で認証すると、IDが返されます。つまり、 Identity APIにクエリを実行して、共有された車両のトークンIDを取得するwalletAddress準備が整ったことになります。

追加リソース:

状態変数

DimoAuthProvider から認証状態の値を取得するだけでなく、使用者のメール、グローバル アカウントのパブリック アドレス、および 使用者JWT。

この値を必要とするコンポーネントはDimoAuthProvider、次のように で囲む必要があります。

<DimoAuthProvider>
    <SomeComponentThatNeedsDimoState/>
<DimoAuthProvider/>

コンポーネントタイプ:

LoginWithDimo

提供される場合permissionTemplateId:

使用者に車両が接続されていません
使用者はすべての車両を共有しています
使用者は共有されていない車両を所有しています

「車両が接続されていません」と表示され、続行ボタンが表示される

「すべての車両が共有されました」と表示され、「続行」ボタンが表示されます

権限共有の対象となるすべての車両のリストを表示

権限が提供されていない場合permissionTemplateId。権限が要求されないため、開発者はこれをShareVehiclesWithDimoログイン後のコンポーネントと組み合わせることができます。

使用者に車両が接続されていません
使用者はすべての車両を共有しています
使用者は共有されていない車両を所有しています

権限の共有をスキップ

権限の共有をスキップ

権限の共有をスキップ

ShareVehiclesWithDimo

これは、開発者がログイン後に使用できる分離されたコンポーネントであり、使用者がログインしていない場合はログインをトリガーします。

使用者に車両が接続されていません
使用者はすべての車両を共有しています
使用者は共有されていない車両を所有しています

「車両が接続されていません」と表示され、続行ボタンが表示される

「すべての車両が共有されました」と表示され、「続行」ボタンが表示されます

権限共有の対象となるすべての車両のリストを表示

LogoutWithDimo

これは開発者がログイン後に 「ログアウト」 ボタンを表示するために使用できるオプションの分離コンポーネントです。これにより、現在のDIMO使用者はアカウントからログアウトされ、アプリケーション内で特権車両コンテンツを提供するには、再度ログイン/再認証が必要になります。

ExecuteAdvancedTransactionsWithDimo

これは、開発者がログイン後に使用できる分離コンポーネントであり、使用者がログインしていない場合はログインをトリガーします。

統合モード

モード
説明

popup

このpopupモードでは、DIMO によるログイン インターフェースを含むブラウザー ポップアップ (新しいウィンドウ) を開く React ボタン コンポーネントが表示されます。

redirect

このredirectモードでは、ユーザーを DIMO によるログイン インターフェースにリダイレクトする React ボタン コンポーネントが表示されます。

使用例

<LoginWithDimo
    mode="popup"
    onSuccess={(authData) => console.log("Success:", authData)}
    onError={(error) => console.error("Error:", error)}
    // This will control if your users are asked to share vehicles, as part of the login flow. "1" is the template for all SACD permissions
    permissionTemplateId={permissionsEnabled ? "1" : undefined}
    // Optionally, specify vehicles (uncomment the line below to use it)
    // vehicles={["585","586"]}  // Specify the vehicles to be accessed after login
    utm="utm_campaign=dimo" // OPTIONAL            
/>
 <ShareVehiclesWithDimo
    mode="popup"
    onSuccess={(authData) => console.log("Success:", authData)}
    onError={(error) => console.error("Error:", error)}
    //REQUIRED: "1" is the template for all SACD permissions
    permissionTemplateId={"1"}
    // OPTIONAL, specify vehicles (uncomment the line below to use it)
    // vehicles={["585","586"]}  // Specify the vehicles to be accessed when triggered
    expirationDate="2062-12-12T18:51:00Z" // ISO 8601 format 
    // OPTIONAL, defaults to 100 year if not specified  
    utm="utm_campaign=dimo" // OPTIONAL  
/>      
<ExecuteAdvancedTransactionWithDimo
    mode="popup"
    onSuccess={(data: any) => console.log("Success:", data)}
    onError={(error: any) => console.error("Error:", error)}
    address="0x21cFE003997fB7c2B3cfe5cf71e7833B7B2eCe10"
    value="0"
    abi={sampleAbi} //Some sample ABI required
    functionName="transfer"
    args={["0x62b98e019e0d3e4A1Ad8C786202e09017Bd995e1", "0"]}
/>
PreviousログインSDKNextDIMOリダイレクトでログイン

Last updated

Was this helpful?