Skip to content

Commit 1ca2ef0

Browse files
xiaoyijunxiaoyijun
authored
docs: add hugging face integration tutorial (#647)
1 parent 0d65891 commit 1ca2ef0

18 files changed

+1139
-0
lines changed

‎tutorial/build-with-logto/_connector-hugging-face.mdx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
## Sign in with Hugging Face account
2+
3+
Go to the [Hugging Face website](https://huggingface.co/) and sign in with your Hugging Face account. You may register a new account if you don't have one.
4+
5+
## Create an OAuth app in the Hugging Face
6+
7+
Follow the [Creating an oauth app](https://huggingface.co/docs/hub/en/oauth#creating-an-oauth-app) guide, and register a new application.
8+
9+
In the creation process, you will need to provide the following information:
10+
11+
- **Application Name**: The name of your application.
12+
- **Homepage URL**: The URL of your application's homepage or landing page.
13+
- **Logo URL**: The URL of your application's logo.
14+
- **Scopes**: The scopes allowed for the OAuth app. For Hugging Face connector, usually use `profile` to get the user's profile information and `email` to get the user's email address. Ensure these scopes are allowed in your Hugging Face OAuth app if you want to use them.
15+
- **Redirect URI**: The URL to redirect the user to after they have authenticated. You can find the redirect URI in the Logto Admin Console when you're creating a Hugging Face connector or in the created Hugging Face connector details page.
16+
17+
## Managing Hugging Face OAuth apps
18+
19+
Go to the [Connected Applications](https://huggingface.co/settings/connected-applications) page, you can add, edit or delete existing OAuth apps.
20+
You can also find `Client ID` and generate `App secrets` in corresponding OAuth app settings pages.
21+
22+
## Configure your connector
23+
24+
Go back to Logto Admin Console And Fill out the `clientId` and `clientSecret` field with _Client ID_ and _App Secret_ you've got from OAuth app detail pages mentioned in the previous section.
25+
26+
`scope` is a space-delimited list of [Hugging Face supported scopes](https://huggingface.co/docs/hub/en/oauth#currently-supported-scopes). If not provided, scope defaults to be `profile`. For Hugging Face connector, the scope you may want to use is `profile` and `email`. `profile` scope is required to get the user's profile information, and `email` scope is required to get the user's email address. Ensure you have allowed these scopes in your Hugging Face OAuth app (configured in [Create an OAuth app in the Hugging Face](#create-an-oauth-app-in-the-hugging-face) section).
27+
28+
### Config types
29+
30+
| Name | Type |
31+
| ------------ | ------ |
32+
| clientId | string |
33+
| clientSecret | string |
34+
| scope | string |

‎tutorial/build-with-logto/generate.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,7 @@ const socialConnectors = [
152152
{ name: 'OIDC', configName: 'Standard OIDC app' },
153153
{ name: 'SAML', configName: 'Standard SAML app' },
154154
{ name: 'OAuth2', configName: 'Standard OAuth 2.0 app' },
155+
{ name: 'Hugging Face', configName: 'Hugging Face OAuth app' },
155156
];
156157

157158
const emailConnectors = [

‎tutorial/build-with-logto/generated-android-hugging-face.mdx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
slug: how-to-build-hugging-face-sign-in-with-android-and-logto
3+
authors: logto
4+
tags: [authentication, hugging-face, android, kotlin/java, social-sign-in, sign-in, login]
5+
title: How to build Hugging Face sign-in with Android and Logto
6+
---
7+
8+
<!--
9+
We have to divide templates into sections because imported mdx will not show in the TOC.
10+
There's no way to customize TOC either. :-)
11+
12+
@see https://github.com/facebook/docusaurus/issues/3915
13+
-->
14+
15+
import Intro from './fragments/_intro.mdx';
16+
import CreateApplication from './fragments/_create-application.mdx';
17+
import AddSocialConnector from './fragments/_add-social-connector.mdx';
18+
import SaveYourConfiguration from './fragments/_save-your-configuration.mdx';
19+
import EnableSocialConnector from './fragments/_enable-social-connector.mdx';
20+
import TestingAndValidation from './fragments/_testing-and-validation.mdx';
21+
import IntegrateSdk from './_integrate-sdk-android.mdx';
22+
import ConnectorGuide from './_connector-hugging-face.mdx';
23+
24+
export const connector = 'Hugging Face';
25+
26+
<!-- truncate -->
27+
28+
<Intro connector={connector} sdk="Android" link="https://developer.android.com/" />
29+
30+
## Create an application in Logto
31+
32+
<CreateApplication type="Native app" framework="Android (Kotlin) / Android (Java)" />
33+
34+
## Integrate Logto SDK
35+
36+
<IntegrateSdk />
37+
38+
## Add Hugging Face connector
39+
40+
<AddSocialConnector connector={connector} />
41+
42+
## Set up Hugging Face OAuth app
43+
44+
<ConnectorGuide />
45+
46+
## Save your configuration
47+
48+
<SaveYourConfiguration connector={connector} />
49+
50+
## Enable Hugging Face connector in Sign-in Experience
51+
52+
<EnableSocialConnector connector={connector} />
53+
54+
## Testing and Validation
55+
56+
<TestingAndValidation connector={connector} sdk="Android" />
57+
58+
## Further readings
59+
60+
[⚔️ Protect your API](/docs/recipes/protect-your-api/) For native and single page apps, you'll need to call one or more API endpoints to retrieve and update data.<br/>
61+
Learn more about identifying who's who and keeping your API secure.
62+
63+
[🧑‍🚀 Manage users](/docs/recipes/manage-users/) We know you care about user management and activities, as we also do.<br/>
64+
Learn more about how to know your users and see the figures like DAU and MAU graphically.
65+
66+
[🌐 Localization](/docs/recipes/customize-sie/localized-language) From one regional business to a global corporate, the willingness to offer the best user experience won't change.<br/>
67+
You can change current language phrases or add a new language without friction.
68+
69+
[🧑‍🎓 Customer IAM series](/blog/tags/ciam) Our serial blog posts about Customer (or Consumer) Identity and Access Management, from 101 to advanced topics and beyond.

‎tutorial/build-with-logto/generated-dotnet-core-blazor-server-hugging-face.mdx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
slug: how-to-build-hugging-face-sign-in-with-dotnet-core-blazor-server-and-logto
3+
authors: logto
4+
tags: [authentication, hugging-face, dotnet-core-blazor-server, c#, social-sign-in, sign-in, login]
5+
title: How to build Hugging Face sign-in with .NET Core (Blazor Server) and Logto
6+
---
7+
8+
<!--
9+
We have to divide templates into sections because imported mdx will not show in the TOC.
10+
There's no way to customize TOC either. :-)
11+
12+
@see https://github.com/facebook/docusaurus/issues/3915
13+
-->
14+
15+
import Intro from './fragments/_intro.mdx';
16+
import CreateApplication from './fragments/_create-application.mdx';
17+
import AddSocialConnector from './fragments/_add-social-connector.mdx';
18+
import SaveYourConfiguration from './fragments/_save-your-configuration.mdx';
19+
import EnableSocialConnector from './fragments/_enable-social-connector.mdx';
20+
import TestingAndValidation from './fragments/_testing-and-validation.mdx';
21+
import IntegrateSdk from './_integrate-sdk-dotnet-core-blazor-server.mdx';
22+
import ConnectorGuide from './_connector-hugging-face.mdx';
23+
24+
export const connector = 'Hugging Face';
25+
26+
<!-- truncate -->
27+
28+
<Intro connector={connector} sdk=".NET Core (Blazor Server)" link="https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models#blazor-server" />
29+
30+
## Create an application in Logto
31+
32+
<CreateApplication type="Traditional web" framework=".NET Core (Blazor Server)" />
33+
34+
## Integrate Logto SDK
35+
36+
<IntegrateSdk />
37+
38+
## Add Hugging Face connector
39+
40+
<AddSocialConnector connector={connector} />
41+
42+
## Set up Hugging Face OAuth app
43+
44+
<ConnectorGuide />
45+
46+
## Save your configuration
47+
48+
<SaveYourConfiguration connector={connector} />
49+
50+
## Enable Hugging Face connector in Sign-in Experience
51+
52+
<EnableSocialConnector connector={connector} />
53+
54+
## Testing and Validation
55+
56+
<TestingAndValidation connector={connector} sdk=".NET Core (Blazor Server)" />
57+
58+
## Further readings
59+
60+
[⚔️ Protect your API](/docs/recipes/protect-your-api/) For native and single page apps, you'll need to call one or more API endpoints to retrieve and update data.<br/>
61+
Learn more about identifying who's who and keeping your API secure.
62+
63+
[🧑‍🚀 Manage users](/docs/recipes/manage-users/) We know you care about user management and activities, as we also do.<br/>
64+
Learn more about how to know your users and see the figures like DAU and MAU graphically.
65+
66+
[🌐 Localization](/docs/recipes/customize-sie/localized-language) From one regional business to a global corporate, the willingness to offer the best user experience won't change.<br/>
67+
You can change current language phrases or add a new language without friction.
68+
69+
[🧑‍🎓 Customer IAM series](/blog/tags/ciam) Our serial blog posts about Customer (or Consumer) Identity and Access Management, from 101 to advanced topics and beyond.

‎tutorial/build-with-logto/generated-dotnet-core-blazor-webassembly-hugging-face.mdx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
slug: how-to-build-hugging-face-sign-in-with-dotnet-core-blazor-webassembly-and-logto
3+
authors: logto
4+
tags: [authentication, hugging-face, dotnet-core-blazor-webassembly, c#, social-sign-in, sign-in, login]
5+
title: How to build Hugging Face sign-in with .NET Core (Blazor WebAssembly) and Logto
6+
---
7+
8+
<!--
9+
We have to divide templates into sections because imported mdx will not show in the TOC.
10+
There's no way to customize TOC either. :-)
11+
12+
@see https://github.com/facebook/docusaurus/issues/3915
13+
-->
14+
15+
import Intro from './fragments/_intro.mdx';
16+
import CreateApplication from './fragments/_create-application.mdx';
17+
import AddSocialConnector from './fragments/_add-social-connector.mdx';
18+
import SaveYourConfiguration from './fragments/_save-your-configuration.mdx';
19+
import EnableSocialConnector from './fragments/_enable-social-connector.mdx';
20+
import TestingAndValidation from './fragments/_testing-and-validation.mdx';
21+
import IntegrateSdk from './_integrate-sdk-dotnet-core-blazor-webassembly.mdx';
22+
import ConnectorGuide from './_connector-hugging-face.mdx';
23+
24+
export const connector = 'Hugging Face';
25+
26+
<!-- truncate -->
27+
28+
<Intro connector={connector} sdk=".NET Core (Blazor WebAssembly)" link="https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models#blazor-webassembly" />
29+
30+
## Create an application in Logto
31+
32+
<CreateApplication type="Single page app" framework=".NET Core (Blazor WebAssembly)" />
33+
34+
## Integrate Logto SDK
35+
36+
<IntegrateSdk />
37+
38+
## Add Hugging Face connector
39+
40+
<AddSocialConnector connector={connector} />
41+
42+
## Set up Hugging Face OAuth app
43+
44+
<ConnectorGuide />
45+
46+
## Save your configuration
47+
48+
<SaveYourConfiguration connector={connector} />
49+
50+
## Enable Hugging Face connector in Sign-in Experience
51+
52+
<EnableSocialConnector connector={connector} />
53+
54+
## Testing and Validation
55+
56+
<TestingAndValidation connector={connector} sdk=".NET Core (Blazor WebAssembly)" />
57+
58+
## Further readings
59+
60+
[⚔️ Protect your API](/docs/recipes/protect-your-api/) For native and single page apps, you'll need to call one or more API endpoints to retrieve and update data.<br/>
61+
Learn more about identifying who's who and keeping your API secure.
62+
63+
[🧑‍🚀 Manage users](/docs/recipes/manage-users/) We know you care about user management and activities, as we also do.<br/>
64+
Learn more about how to know your users and see the figures like DAU and MAU graphically.
65+
66+
[🌐 Localization](/docs/recipes/customize-sie/localized-language) From one regional business to a global corporate, the willingness to offer the best user experience won't change.<br/>
67+
You can change current language phrases or add a new language without friction.
68+
69+
[🧑‍🎓 Customer IAM series](/blog/tags/ciam) Our serial blog posts about Customer (or Consumer) Identity and Access Management, from 101 to advanced topics and beyond.

‎tutorial/build-with-logto/generated-dotnet-core-mvc-hugging-face.mdx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
slug: how-to-build-hugging-face-sign-in-with-dotnet-core-mvc-and-logto
3+
authors: logto
4+
tags: [authentication, hugging-face, dotnet-core-mvc, c#, social-sign-in, sign-in, login]
5+
title: How to build Hugging Face sign-in with .NET Core (MVC) and Logto
6+
---
7+
8+
<!--
9+
We have to divide templates into sections because imported mdx will not show in the TOC.
10+
There's no way to customize TOC either. :-)
11+
12+
@see https://github.com/facebook/docusaurus/issues/3915
13+
-->
14+
15+
import Intro from './fragments/_intro.mdx';
16+
import CreateApplication from './fragments/_create-application.mdx';
17+
import AddSocialConnector from './fragments/_add-social-connector.mdx';
18+
import SaveYourConfiguration from './fragments/_save-your-configuration.mdx';
19+
import EnableSocialConnector from './fragments/_enable-social-connector.mdx';
20+
import TestingAndValidation from './fragments/_testing-and-validation.mdx';
21+
import IntegrateSdk from './_integrate-sdk-dotnet-core-mvc.mdx';
22+
import ConnectorGuide from './_connector-hugging-face.mdx';
23+
24+
export const connector = 'Hugging Face';
25+
26+
<!-- truncate -->
27+
28+
<Intro connector={connector} sdk=".NET Core (MVC)" link="https://dotnet.microsoft.com/apps/aspnet/mvc" />
29+
30+
## Create an application in Logto
31+
32+
<CreateApplication type="Traditional web" framework=".NET Core (MVC)" />
33+
34+
## Integrate Logto SDK
35+
36+
<IntegrateSdk />
37+
38+
## Add Hugging Face connector
39+
40+
<AddSocialConnector connector={connector} />
41+
42+
## Set up Hugging Face OAuth app
43+
44+
<ConnectorGuide />
45+
46+
## Save your configuration
47+
48+
<SaveYourConfiguration connector={connector} />
49+
50+
## Enable Hugging Face connector in Sign-in Experience
51+
52+
<EnableSocialConnector connector={connector} />
53+
54+
## Testing and Validation
55+
56+
<TestingAndValidation connector={connector} sdk=".NET Core (MVC)" />
57+
58+
## Further readings
59+
60+
[⚔️ Protect your API](/docs/recipes/protect-your-api/) For native and single page apps, you'll need to call one or more API endpoints to retrieve and update data.<br/>
61+
Learn more about identifying who's who and keeping your API secure.
62+
63+
[🧑‍🚀 Manage users](/docs/recipes/manage-users/) We know you care about user management and activities, as we also do.<br/>
64+
Learn more about how to know your users and see the figures like DAU and MAU graphically.
65+
66+
[🌐 Localization](/docs/recipes/customize-sie/localized-language) From one regional business to a global corporate, the willingness to offer the best user experience won't change.<br/>
67+
You can change current language phrases or add a new language without friction.
68+
69+
[🧑‍🎓 Customer IAM series](/blog/tags/ciam) Our serial blog posts about Customer (or Consumer) Identity and Access Management, from 101 to advanced topics and beyond.

‎tutorial/build-with-logto/generated-dotnet-core-razor-pages-hugging-face.mdx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
slug: how-to-build-hugging-face-sign-in-with-dotnet-core-razor-pages-and-logto
3+
authors: logto
4+
tags: [authentication, hugging-face, dotnet-core-razor-pages, c#, social-sign-in, sign-in, login]
5+
title: How to build Hugging Face sign-in with .NET Core (Razor Pages) and Logto
6+
---
7+
8+
<!--
9+
We have to divide templates into sections because imported mdx will not show in the TOC.
10+
There's no way to customize TOC either. :-)
11+
12+
@see https://github.com/facebook/docusaurus/issues/3915
13+
-->
14+
15+
import Intro from './fragments/_intro.mdx';
16+
import CreateApplication from './fragments/_create-application.mdx';
17+
import AddSocialConnector from './fragments/_add-social-connector.mdx';
18+
import SaveYourConfiguration from './fragments/_save-your-configuration.mdx';
19+
import EnableSocialConnector from './fragments/_enable-social-connector.mdx';
20+
import TestingAndValidation from './fragments/_testing-and-validation.mdx';
21+
import IntegrateSdk from './_integrate-sdk-dotnet-core-razor-pages.mdx';
22+
import ConnectorGuide from './_connector-hugging-face.mdx';
23+
24+
export const connector = 'Hugging Face';
25+
26+
<!-- truncate -->
27+
28+
<Intro connector={connector} sdk=".NET Core (Razor Pages)" link="https://learn.microsoft.com/aspnet/core/razor-pages/" />
29+
30+
## Create an application in Logto
31+
32+
<CreateApplication type="Traditional web" framework=".NET Core (Razor Pages)" />
33+
34+
## Integrate Logto SDK
35+
36+
<IntegrateSdk />
37+
38+
## Add Hugging Face connector
39+
40+
<AddSocialConnector connector={connector} />
41+
42+
## Set up Hugging Face OAuth app
43+
44+
<ConnectorGuide />
45+
46+
## Save your configuration
47+
48+
<SaveYourConfiguration connector={connector} />
49+
50+
## Enable Hugging Face connector in Sign-in Experience
51+
52+
<EnableSocialConnector connector={connector} />
53+
54+
## Testing and Validation
55+
56+
<TestingAndValidation connector={connector} sdk=".NET Core (Razor Pages)" />
57+
58+
## Further readings
59+
60+
[⚔️ Protect your API](/docs/recipes/protect-your-api/) For native and single page apps, you'll need to call one or more API endpoints to retrieve and update data.<br/>
61+
Learn more about identifying who's who and keeping your API secure.
62+
63+
[🧑‍🚀 Manage users](/docs/recipes/manage-users/) We know you care about user management and activities, as we also do.<br/>
64+
Learn more about how to know your users and see the figures like DAU and MAU graphically.
65+
66+
[🌐 Localization](/docs/recipes/customize-sie/localized-language) From one regional business to a global corporate, the willingness to offer the best user experience won't change.<br/>
67+
You can change current language phrases or add a new language without friction.
68+
69+
[🧑‍🎓 Customer IAM series](/blog/tags/ciam) Our serial blog posts about Customer (or Consumer) Identity and Access Management, from 101 to advanced topics and beyond.

0 commit comments

Comments
 (0)