Externe Client¶

Naast de “Polka interne OAuth Client”, is het ook mogelijk om een eigen OAuth client te gebruiken en de access_token aan Polka te geven.

instellen MapsAPI/POLKA OAuth & Externe OAuth Client¶

Je hebt een MapsAPI Applicatie aangemaakt
Ga naar applicatie instellingen
In MapsAPI: Bewerk OAuth gegevens
In MapsAPI OAuth: Kies “Extern” en klik op “Opslaan”
In MapsAPI OAuth: Vul veld “Issuer” in Deze moet overeenkomen met de claim “iss” van de door externe server uitgegeven JWT
In MapsAPI OAuth: Vul veld “JWKS URI” in Deze moet wijzen naar de locatie van de externe server waar de “JSON Web Key Sets” op te halen is. voorbeeld: https://example.com/.well-known/jwks.json
In MapsAPI OAuth: Klik op “Opslaan” Na opslaan is het veld “Audience” ingevuld, dit is de waarde die door de externe server gebruikt moet worden als claim “aud” in de JWT.
Configureer Polka:

provider: “extern” en stel een callback in die een access_token ophaalt en teruggeeft.

{
    "base": "https://www.planviewer.nl",
    "viewer": {
        "identifier": "<jouw viewer identifier>"
    },
    "view": {
    },
    "oauth": {
        "provider": "external"
    }
}

De POLKA viewers in jouw MapsAPI applicatie maken nu gebruik van een externe OAuth provider

Volledige voorbeeld¶

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <link rel="icon" href="/favicon.ico"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
        <link rel="stylesheet" href="../css/style.css" type="text/css">
        <title>Polka - OAuth - Externe Client</title>
    </head>
    <body>
        <div id="map" class="map-full"></div>
        <script type="module">
            import config from '../polka-oauth-extern.json';
            import { setup } from './setup.js';
            import { PolkaPlus } from '@planviewer/polka-plus';
            import { OAuth2Client, OAuth2Fetch } from '@badgateway/oauth2-client';

            const polka = setup(config);

            /** vind mijn kaart-container */
            const map = document.querySelector('#map');
            /** initialiseer Polka met de kaart-container */
            polka.viewer.view.map.target = map;

        </script>
    </body>
</html>

setup.js

import { PolkaPlus } from '@planviewer/polka-plus';
import { OAuth2Client, OAuth2Fetch, generateCodeVerifier } from '@badgateway/oauth2-client';

export const setup = (config) => {

    const redirect_uri = window.location;

    const client = new OAuth2Client({
        // The base URI of your OAuth2 server
        server: config.oauth.base_uri,
            // OAuth2 client id
        clientId: config.oauth.client_id,
        authorizationEndpoint: config.oauth.authorization_endpoint,
        tokenEndpoint: config.oauth.token_endpoint,
    });


    const fetchWrapper = new OAuth2Fetch({
        client: client,

        /**
         * You are responsible for implementing this function.
         * it's purpose is to supply the 'initial' oauth2 token.
         */
        getNewToken: async () => {

            /** need to store this if you want to use PKCE */
            // const verifier = await generateCodeVerifier();

            const _current = new URL(window.location);

            /** if not has code from redirect .. */
            if (!_current.searchParams.get("code")) {

                /** try login */
                const authorize_uri = new URL(await client.authorizationCode.getAuthorizeUri({
                    redirectUri: redirect_uri,
                    // codeVerifier: verifier,

                    /** specific to Auth0 */
                    scope: ["openid", "profile", "email", "offline_access"],
                }));

                /** specific to Auth0 authorization */
                authorize_uri.searchParams.set("audience", config.oauth.audience);
                window.location = authorize_uri.toString();

            } else {
                /** redirected from OAuth login */
                const code = await client.authorizationCode.getTokenFromCodeRedirect(
                    window.location.href,
                    {
                        /**
                         * The redirect URI is not actually used for any redirects, but MUST be the
                         * same as what you passed earlier to "authorizationCode"
                         */
                        redirectUri: redirect_uri,
                        // codeVerifier: verifier,
                    }
                );

                /** remove code from url */
                _current.searchParams.delete("code");
                history.replaceState("", null, _current.toString());
                return code;
            }

        },

        /**
         * Optional. This will be called for any fatal authentication errors.
         */
        onError: (err) => {
            // err is of type Error
        }

    });

    config.oauth.auth_callback = async () => {
        const access_token = await fetchWrapper.getAccessToken();
        return access_token;
    };

    const polka = PolkaPlus(config);

    /** Wacht totdat de setup klaar is */
    const event = polka.viewer.events;
    event.addEventListener("expose.setup.done", (e) => {
        const layers = polka.viewer.view.map.layers;

        /** set alle lagen visible */
        Array.from(layers.values()).forEach((layer) => {
            layer.visible = true;
        });
    });
    return polka;
};