Pour cette méthode d'authentification, nous allons essentiellement utiliser la librairie MSAL.js v2 pour navigateur
Lorsque la page /Silent/tabsilentauthenticationstart.html se charge elle déclenche la méthode MSALLoginPopup()
function MSALLoginPopup() {
microsoftTeams.initialize(window);
microsoftTeams.getContext(function (context) {
var MSALApp = new msal.PublicClientApplication(msalConfig)
var currentAccount = MSALApp.getAccountByUsername(context.upn);
const silentRequest = {
scopes: ["User.Read", "Mail.Read"],
account: currentAccount,
forceRefresh: false
};
const request = {
scopes: ["User.Read", "Mail.Read"],
loginHint: context.upn
};
MSALApp.acquireTokenSilent(silentRequest).then(tokenResponse => {
$('#AccessToken').text(tokenResponse.accessToken);
}).catch(async (error) => {
$('#Error').text(error);
if (context.hostClientType === 'web') {
MSALApp.acquireTokenPopup(request).then(tokenResponse => {
$('#Error').text("");
$('#AccessToken').text(tokenResponse.accessToken);
});
}
else {
MSALPopupRedirect(MSALApp);
}
}).catch(error => {
$('#Error').text(error);
});
});
}Tout d'abord on instancie la class msal.PublicClientApplication() en lui passant les paramètres Azure Active Directory définis de la manière suivante.
const msalConfig = {
auth: {
clientId: "[CLIENT ID]",
authority: "https://login.microsoftonline.com/common",
redirectUri: window.location.origin + "/Silent/tabsilentauthenticationend.html"
},
cache: {
cacheLocation: "localStorage",
storeAuthStateInCookie: false,
},| Paramètres | Description |
|---|---|
| clientId | Id de l'application enregistrée sur Azure Active Directory. Pour l'inscription d'une application sur Azure Active Directory se référrer à l'article Inscription d'une application SPA |
| authority | Point d'entré Azure Active Directory |
| redirectUri | Url qui sera rappelée par Azure Active Directory. Il est important que lors de l'enregistrement de l'application sur Azure Active Directory de bien la mentionner. Pour l'inscription d'une application sur Azure Active Directory se référrer à l'article Inscription d'une application SPA |
Si l'utilisateur est déjà connecté on récupère son compte pour l'utiliser dans la demande silencieuse du jeton.
var currentAccount = MSALApp.getAccountByUsername(context.upn)S
const silentRequest = {
scopes: ["User.Read", "Mail.Read"],
account: currentAccount,
forceRefresh: false
};Ensuite on va essayer d'obtenir un jeton de manière silencieuse et l'afficher.
MSALApp.acquireTokenSilent(silentRequest).then(tokenResponse => {
$('#AccessToken').text(tokenResponse.accessToken);Si c'est la 1ere fois que l'utilisateur utilise l'application, la méthode échoue et on déclenche la méthode MSALApp.acquireTokenPopup().
C'est alors que l'on demande à l'utilisateur de s'authentifier et d'approuver les consentements.
Vous aurez noté, qu'il est possible de récupèrer le context Microsoft Teams dans lequel tourne l'application. microsoftTeams.getContext(function (context).
L'objet context expose la propriété .hostClientType qui sera alors possible de tester pour savoir si l'application tourne dans la version Web du client Teams ou tout autre client.
Comme la méthode acquiereTokenPopup() ne fonctionne pas "encore" sur les clients Teams de bureau et mobile, nous invoquons une autre méthode MSALPopupRedirect() pour l'authentification.
function MSALPopupRedirect(msalapp) {
microsoftTeams.authentication.authenticate({
url: window.location.origin + "/Popup/authPopupRedirect.html",
width: 1024,
height: 1024,
successCallback: (result) => {
$('#Error').text("");
$('#AccessToken').text(result.accessToken);
},
failureCallback: (reason) => {
$('#Error').text(reason);
}
});
}La méthode microsoftTeams.authentication.authenticate() va permettre de charger la page authPopupRedirect.html dans une Popup.
En fonction de la réussite ou de l'échec de l'authentification, on affiche le jeton ou l'erreur. Lorsque la page authPopupRedirect se charge elle exécute le code suivant :
$(document).ready(function () {
microsoftTeams.initialize(window);
const msalPopupConfig = {
auth: {
clientId: msalConfig.auth.clientId,
authority: msalConfig.auth.authority,
redirectUri: window.location.origin + "/Popup/authPopupRedirect.html"
},
cache: {
cacheLocation: "sessionStorage",
storeAuthStateInCookie: false,
}
};
const msalClient = new msal.PublicClientApplication(msalPopupConfig);
microsoftTeams.getContext((context) => {
msalClient.handleRedirectPromise().then((tokenResponse) => {
if (tokenResponse) {
microsoftTeams.authentication.notifySuccess(tokenResponse);
}
}).catch((error) => {
console.log(error);
microsoftTeams.authentication.notifyFailure(error);
});
msalClient.loginRedirect({
scopes: ["User.Read", "Mail.Read"],
loginHint: context.loginHint
});
});
});Ici c'est la méthode msaClient.LoginRedirect() qui affichera la page d'authentification et de consentement à l'utilisateur.
Si une erreur survient, la méthode microsoftTeams.authentication.notifyFailure(error) est invoquée et renvoie l'erreur à la page /Silent/tabsilentauthenticationstart.html qui sera traitée par la méthode failureCallback
Si la demande de jeton réussie, la méthode microsoftTeams.authentication.notifySuccess(tokenResponse) est invoquée et renvoie le résultat à la page /Silent/tabsilentauthenticationstart.html qui sera traité par la méthode successCallback
Note : Je dois encore corriger quelques bugs lors de l'utilisation de cette exemple dans les clients teams de bureau et Mobile, stay tune !!
Si l'authenfication réussie, vous devriez obtenir le jeton d'accès comme illustré sur la figure suivante :
