I have a widget using OAuth2 functionality. In the widget's postcreate function, I call this function
_logon() {
var theAppId, thePopupCallbackUrl;
var location = this._appInfo.find(x => x.location === window.location.hostname);
if (location !== undefined) {
theAppId = location.appID;
thePopupCallbackUrl = location.popupCallbackUrl;
} else {
new Message({
titleLabel: 'Error',
message: 'This site will not allow ArcGIS.com login'
});
this._logoff();
return;
}
var info = new ArcGISOAuthInfo({
appId: theAppId,
popupCallbackUrl: thePopupCallbackUrl,
popup: true,
portalUrl: this.config.agol.portalUrl
});
esriId.registerOAuthInfos([info]);
esriId.getCredential(info.portalUrl, {
oAuthPopupConfirmation: true
}).then(lang.hitch(this, function () {
new arcgisPortal.Portal(this.config.agol.portalUrl).signIn().then(lang.hitch(this, function (portalUser) {
var portal = portalUser.portal;
var queryParams = {
num: 100,
q: 'owner: ' + this._ownerName + ' AND type: Feature Service'
};
portal.queryItems(queryParams).then(lang.hitch(this, function (result) {
if (result.total > 0) {
if (array.some(result.results, lang.hitch(this, function (item) {
this._SPGridUrl = item.url;
return this._SPGridUrl.indexOf(this._baseGridLayerName) > -1;
}))) {
this._prepareEditor();
} else {
this._SPGridUrl = null;
new Message({
titleLabel: 'Logging out',
message: 'The grid was not found in your account!'
});
}
} else {
this._SPGridUrl = null;
new Message({
titleLabel: 'Logging out',
message: 'The grid is not available to edit!'
});
}
}));
}
)).otherwise(
function (error) {
new Message({
titleLabel: 'Error occurred while signing in',
message: error
});
}
);
}))
.otherwise(lang.hitch(this, this._promiseRejected));
},
When the user starts the widget, after they successfully log in, the code searches for a feature layer (which begins with the string indicated in the variable this._baseGridLayerName) in their AGOL contents and added to their map (in the _prepareEditor function). The variable this._appInfo contains the AppID and the popup callback URL. In my case, I have several of these defined, since I have versions running on my laptop, a development server, and the production server.
this._appInfo = [
{
"location": "productionURL",
"appID": "xxxxxxxxxxxxxxxxx",
"popupCallbackUrl": "productionURL/oauth-callback.html"
},
{
"location": "developmentURL",
"appID": "xxxxxxxxxxxxxxxxx",
"popupCallbackUrl": "developmentURL/oauth-callback.html"
},
{
"location": "laptopURL",
"appID": "xxxxxxxxxxxxxxxxx",
"popupCallbackUrl": "./oauth-callback.html"
}
]