Skip to main content

Integration Examples

The following integration examples show how azuma mimoto can be integrated by using the OIDC Authorization Code flow.

The source code is available under: https://github.com/azuma-healthtech-public/mimoto-examples

Missing an example?

If your framework is missing, or you are interested in some specific example, please don't hesitate to contact us.

React app (OIDC and OIDC with PKCE)​

This example uses https://www.npmjs.com/package/react-oidc-context and requires only simple configuration of the provider:

const oidcConfig = {
  authority: "*mimoto-url*",
  client_id: "*your client-id*",
  client_secret: "*your client-secret*", // only provided for non-PKCE
  redirect_uri: "*your redirect-url*",
  scope: "*your_scopes*",
};

export default function Oidc() {
  return (
    <AuthProvider {...oidcConfig}>
      <OidcInner />
    </AuthProvider>
  );
}

function OidcInner() {
  const auth = useAuth();
  return (
    <Card>
      <h1>OIDC Example</h1>

      {/* Error Handling */}

      {auth.isLoading ? (
        <Spin />
      ) : (
        <div>
          {!auth.isAuthenticated && (
            <div>
              Not authenticated yet
              <br />
              <button onClick={() => void auth.signinRedirect()}>Log in</button>
            </div>
          )}
          {auth.isAuthenticated && (
            <div>
              {/* Display User Detail etc.. */ }
              <button onClick={() => void auth.removeUser()}>Log out</button>
            </div>
          )}
        </div>
      )}
    </Card>
  );
}

React app (OIDC with PKCE) with Keycloak (OIDC)​

This example uses https://www.npmjs.com/package/react-oidc-context with the provider configuration point to Keycloak.

const oidcConfig = {
  authority: "*keycloak-url*/realms/eid-test",
  client_id: "*your-keycloak-client-id*",
  redirect_uri: "*your redirect-url*",
  scope: "*your_scopes*",
};

export default function OidcKeycloak() {
  return (
    <AuthProvider {...oidcConfig}>
      ...
    </AuthProvider>
  );
}

In Keycloak Administration, azuma mimoto the following configurations are required

  1. Register Mimoto as Identity Provider
  2. Define Identity Identity Provider mappers, e.g.: Attribute Mapper for email from "urn:telematik:claims:email"
  3. Create Client Scopes (e.g. the ones you will request from federated IDPs)
  4. Create Client Scope Mappers
  5. Create Client (type its ID OpenID Connect) with scopes defined above.

Keycloak has an extensive documentation on how to integrate Identity Providers under https://www.keycloak.org/docs/22.0.5/server_admin/#_identity_broker.

.NET: dotnet-client-mvc-oidc​

This example was forked from https://github.com/openiddict/openiddict-samples/tree/dev/samples/Velusia/Velusia.Client and configuration extended for azuma mimoto.

General Idea:
ASP.NET Core MVC application has login via OpenID Connect Authorization Code against azuma mimoto (integrated via https://github.com/openiddict/openiddict-core).

.NET: dotnet-client-server-mvc-oidc​

This example was forked from https://github.com/openiddict/openiddict-samples/tree/dev/samples/Velusia and configuration extended for azuma mimoto.

General Idea: ASP.NET Core MVC application has login via OpenID Connect Authorization Code flow against ASP.NET Core Authorization Server, which integrates azuma mimoto (via OpenID Connect Authorization Code).

.NET: dotnet-server-mvc-oidc​

This example was forked from https://github.com/openiddict/openiddict-samples/tree/dev/samples/Velusia/Velusia.Server and configuration extended for azuma mimoto.

General Idea: ASP.NET Core Authorization Server, which integrates azuma mimoto (via OpenID Connect Authorization Code). Can be used from react or android apps.

Ruby: rails-rodauth-omniauth-simple​

Simple example using omniauth to integrate azuma mimoto (via OpenID Connect Authorization Code) and rodauth for auth management.

PHP: laravel-passport-socialite​

Simple example using socialite to integrate azuma mimoto (via OpenID Connect Authorization Code) and passport for auth management. Can be used to

  • directly login via login api
  • via OpenID Connect Authorization Code flow

Android: android-app-auth-code-exchange​

See Android example

React.Native: react-native-*-ce​

See React.Native example

Flutter: flutter-ce​

See https://github.com/azuma-healthtech-public/mimoto-examples/tree/main/flutter-ce

Ionic + Angular + Cordova: ionic-angular-cordova-ce​

See https://github.com/azuma-healthtech-public/mimoto-examples/tree/main/ionic-angular-cordova-ce