In our app, we have a simple Google-Sign-In flow where a popup opens, users log in and grant us offline permission for accessing Google Analytics.
We just got emailed that we're using a Google+ API (plus.people.getOpenIdConnect method) that is about to get deprecated, but we don't use it in our code.
I can't seem to figure out where we are using Google+ API so I could replace it.
Here is our simple code:
prepareGoogleClient() {
$.ajax({
url: "//apis.google.com/js/client:platform.js",
dataType: "script"
}).done(() => {
gapi.load("auth2", () => {
let auth = gapi.auth2.init({
client_id: ENV.googleClientId,
scope:
"https://www.googleapis.com/auth/analytics.readonly https://www.googleapis.com/auth/webmasters.readonly"
});
this.auth = auth;
});
if (gapi.auth2 && !this.auth) {
this.auth = gapi.auth2.getAuthInstance();
}
});
}
Later on we call this.auth.grantOfflineAccess(params), which returns the token that we save for later.
If I disable Google+ API in our Google Platform dashboard, the Sign-In stops working and the popup responds with a sign-in error. I was also able to confirm that Google+ API (from its metrics panel) is indeed used in the process of our users signing in the popup and granting scope permissions.
How do I need to rewrite this so it won't use the deprecated plus.people.getOpenIdConnect method?
The issue was in Rails back-end code which handles OAuth2. The outdated omniauth-google-oauth2 gem was using the deprecated Google+ endpoint.
I think everyone using Google+ API's in their app, have got that mail.
Don't know if this helps but got this is from google API's site.
The Google+ Sign-in feature has been fully depreciated and will also
be shut down on March 7, 2019. Developers should migrate to the more
comprehensive Google Sign-in authentication system.
https://developers.google.com/+/web/api/javascript
https://developers.google.com/+/integrations-shutdown
Other References:
List of API's to be removed https://developers.google.com/+/api-shutdown
New Sign(identity) https://developers.google.com/identity/
Identity for web app https://developers.google.com/identity/sign-in/web/
Add Google Sign-In to Your Web App
function onSignIn(googleUser) {
// Useful data for your client-side scripts:
var profile=googleUser.getBasicProfile();
console.log("ID: " + profile.getId()); // Don't send this directly to your server!
console.log('Full Name: ' + profile.getName());
console.log('Given Name: ' + profile.getGivenName());
console.log('Family Name: ' + profile.getFamilyName());
console.log("Image URL: " + profile.getImageUrl());
console.log("Email: "+profile.getEmail());
// The ID token you need to pass to your backend:
var id_token=googleUser.getAuthResponse().id_token;
console.log("ID Token: "+id_token);
}
<html lang="en">
<head>
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
</body>
</html>
Related
I have created few scenarios in health bot designer. I am trying to integrate with my front end. However, I don't see any complete documentation around integrate process. I have already referred https://github.com/Microsoft/HealthBot-WebChat without any luck. How do I get directline link for healthbot. I have tried with web bot and able to generate directline but not sure how to link web bot channel to health bot scenario. Any help?
You can integrate the Healthcare bot service into a web application using WebChat. First, you need to get your WebChat Secret from the Healthcare Bot Service Manager. In the pane on the left, click on the integrations blade, select secrets in the drop down options, and copy the webchat_secret.
Once you have the secret, you can request a token from DirectLine and render a WebChat component on your web app. Take a look at the example below.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Healthcare bot</title>
<script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script>
<style>
html, body { height: 100% }
body { margin: 0 }
#webchat,
#webchat > * {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="webchat" role="main"></div>
<script>
(async function() {
// Note, for the simplicity of this example, we are fetching the DirectLine token here;
// however, it is recommended that you create a backend REST API to generate and manage
// your tokens.
const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate',
{
method: 'POST',
headers: {
'Authorization': `Bearer <WEBCHAT_SECRET>`,
'Content-Type': 'application/json'
},
body: {
// The user id must start with `dl` and should be unique for each user.
User: { Id: 'dl_user_id' }
}
});
const { token } = await res.json();
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token }),
}, document.getElementById('webchat'));
})().catch(err => console.log(err));
</script>
</body>
Note, for the simplicity of this example, we are fetching the DirectLine token here; however, it is recommended that you create a backend REST API to generate and manage your tokens.
Hope this helps!
Found a way to do it. We need to add a model and enable the trigger through Health Bot Management Portal
There is a direct way to trigger a scenario from the front end. If you want to completely rely on your own responses, then you have to turn off the built-in scenarios and call a scenario name in the event post javascript code. Look at the "trigger" element below:
botConnection
.postActivity({
type: "event",
value: {
trigger: "your_scenario_name_here", args: {}
},
from: your_user_name,
name: "BeginDebugScenario"
});
I have developed a PWA application with google and microsoft oauth login integration.Now I want the PWA application to run as windows PWA app in windows mobile and desktop applications, so I tried registering the app using AppX as stated in the following link, https://blogs.windows.com/msedgedev/2018/02/06/welcoming-progressive-web-apps-edge-windows-10/#R6xvoOyZeLza5oGW.97
and ran the application in development mode using PowerShell in windows 10 OS version, the microsoft login works great, However when I try to login using google the application starts loading and exits after some time.[the popup to show the login window also doesn't come up].
Could anyone throw a light on what's happening ?.I researched but I couldn't get any solutions.
Edit
The following API is used for login with google, in the client[react]
gapi.load('auth2', () => {
this.auth2 = gapi.auth2.init({
client_id: constant.CLIENT_ID,
cookie_policy: 'single_host_origin',
scope: constant.SCOPE,
});
});
loginWithGoogle = () => {
const options = {
scope: constant.SCOPE,
};
options.prompt = 'select_account';
this.provider = 'google';
this.auth2.grantOfflineAccess(options).then((data) => {
this.loginUser(data.code);
});
}
Maybe is because your browser´s popup blocker, anyway you could use redirection instead popup mode, using ux_mode option (you have to configure the redirection url on OAuth 2.0 client IDs options)
gapi.load('auth2', () => {
this.auth2 = gapi.auth2.init({
ux_mode: 'redirect',
client_id: constant.CLIENT_ID,
cookie_policy: 'single_host_origin',
scope: constant.SCOPE,
});
});
Friends,
I am trying to call API from Word Add-in and getting "Access Denied" error. I did some research and it looks like "Cross Origin Resource Sharing" is the cause.
1. Web API
I am hosting Web API 2 locally at "http://localhost:61546/api/ORG_NAMES"
& I have enabled CORS to accept all origins, See below WebApiConfig.
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
2. Test Application
To test this API to ensure it supports CORS, I have created below page and hosted on localhost:52799/home.html, I was able to get expected response. I have tested this in IE 10 & Chrome.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
var obj;
.support.cors = true;
$.getJSON("http://localhost:61546/api/ORG_NAMES/112233",
function (data) {
alert(data.ORG_ID);
});
});
});
</script>
</head>
<body>
<button>Click me</button>
</body>
3. Word Add-In
Now I wanted to call this API from my Word Web Add-In. Word Add-In running from different host https://localhost:44339/, see below code. Here getJSON returns "Access Denied".
var OrgID;
$.getJSON("http://localhost:61546/api/ORG_NAMES/112233",
function (data) {
OrgID = data.ORG_ID;
});
Also when I call API from word add-in, it's not going to fiddler.
Note: This is "Web Add-ins --> Word Add-in" project.
4. Fix - Need Help
Not sure why I am getting "Access Denied" error from Word-Add-In, if CORS is the issue then my test application (#2) shouldn't have worked, correct ?
I have tried call JSON using "$.ajax", "XMLHttpRequest" but it didn't work.I might be missing some configuration settings.
Appreciate any help here.
Let me know if you need more information.
Since it sounds like an issue within an Office Add-in only, rather than in a regular page, have you tried setting your AppDomains in the manifest file? See "Specify domains you want to open in the add-in window" in https://dev.office.com/docs/add-ins/overview/add-in-manifests
<?xml version="1.0" encoding="UTF-8"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="TaskPaneApp">
<Id>c6890c26-5bbb-40ed-a321-37f07909a2f0</Id>
<Version>1.0</Version>
<ProviderName>Contoso, Ltd</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<DisplayName DefaultValue="Northwind Traders Excel" />
<Description DefaultValue="Search Northwind Traders data from Excel"/>
<AppDomains>
<AppDomain>https://www.northwindtraders.com</AppDomain>
</AppDomains>
<DefaultSettings>
<SourceLocation DefaultValue="https://www.contoso.com/search_app/Default.aspx" />
</DefaultSettings>
<Permissions>ReadWriteDocument</Permissions>
</OfficeApp>
You will not need Jsonp if you are making Ajax calls. You will have to make sure that you all launches with HTTPS, if it is launching in HTTP it will block that traffic. Remember that office-js back bone is IE and there for; for security purposes the api will only allow HTTPS
Update
Remember that an office-js add in is actually two projects and you must make sure your projects are both launching in HTTPS. Also I would just look over the Manifest file and look at your source and make sure that is point at HTTPS
I had same issue using ajax could not call web-api.NET MVC.
Web api side(Server side):
Implement CORS in Web api because excel office.js works on diffent port and binds proxy object of server inside excel while web api are held on another port so it is as good as having 2 different domains on local so browser automatically blocks request made.
So Cross origin Resource sharing is required.
Enable Https for web apis.
http://csharp-video-tutorials.blogspot.com/2016/09/aspnet-web-api-enable-https.html
Client side
Just make call using ajax as shown below.
url: 'https://localhost:44319/api/Default/PostItems'
Note : https : is compulsory required .
function makeAjaxCall(rangeJSON) {
$.ajax({
url: 'https://localhost:44319/api/Default/PostItems',
type: 'POST',
data: rangeJSON,
contentType: 'application/json;charset=utf-8',
}).done(function (data) {
console.log(data)
app.showNotification(data.Status, data.Message);
}).fail(function (status) {
app.showNotification('Error', 'Could not communicate with the server.');
}).always(showResponse);
}
function exceltojson() {
Excel.run(function (ctx) {
var range = ctx.workbook.worksheets.getItem("Sheet1").getRange("A1:BO765");
range.load("values, numberFormat");
ctx.sync().then(
function () {
makeAjaxCall(JSON.stringify(range.values));
}).catch(function (error) {
console.log(error);
});
});
function showResponse(object) {
console.log(object);
$("#output").text(JSON.stringify(object,null, 4));
}
I am currently trying to use gapi.auth2 from Google Sign-In for Websites API and this is the code I have:
-- load the library with:
<script src="https://apis.google.com/js/platform.js?onload=onLoadGapiCallback" async defer></script>
-- initialize an auth2 variable:
var auth2;
window.onLoadGapiCallback = () => {
gapi.load('auth2', () => {
auth2 = gapi.auth2.init({
'client_id': 'CLIENT_ID',
'scope': 'profile email https://www.googleapis.com/auth/youtube.readonly'
});
});
};
-- and when a botton is clicked do:
auth2.signIn().then(() => {
console.log('auth is:', auth2.currentUser.get().getAuthResponse().access_token);
});
This works well, it initializes the auth2 variable, when I click the button, it shows the SingIn prompt and I choose one of my Google Accounts. The problem is from now on when I have to choose a YouTube account, if I choose other account than the main one, I'll get an Exception Object like this one:
{type: "tokenFailed", idpId: "google", error: "USER_LOGGED_OUT"}
also there's an XHR request being sent lastly that has this response:
{"error":"USER_LOGGED_OUT","detail":"No active session found."}
So it only works if I choose the main account, but I cannot choose other YouTube accounts.
What am I missing here?
I've looked into all these docs but none helped me:
Getting profile information
Google Sign-In JavaScript client reference
Monitoring the user's session state
Update:
Running the code from this example (but with this scope: 'profile email https://www.googleapis.com/auth/youtube.readonly') will only work if I choose the first Youtube account for each Google account. If I choose any other Youtube account, I'll get this alert error:
I'm writing a page that uses OAuth 2.0 via gapi.auth.authorize to authenticate a Google+ user and gapi.client.request to run Google Fusion Tables sqlGet queries. I find that my queries run fine before authentication, but then fail with a 403 "Insufficient Permission" error when run more than 30 seconds
after authentication.
The problem is demonstrated with this page:
https://googledrive.com/host/0B5Urq1jZb1MYSWloU3NTY2M4Qnc/test3b.htm
Please follow these steps:
Click "Query" to run a gapi.client.request Google Fusion Table SQL-get query returning a count of rows. This will run successfully until OAuth is used in steps 2 and 3.
Click "Start OAuth" to run an immediate:true authorization against Google+. If you are currently signed into Google+, your user name and ID will be displayed in the third button.
If your Google+ user name is not displayed in the third button, click the button ("Authorize") and sign into Google+.
Click the "Query" button again. The query will run without error when pressed within about 30 seconds of OAuth authorization. After that, the query fails with a 403 error. WHY?
Here is the source for the demo page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Test3b</title>
<style type="text/css">
</style>
<script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var g_domIsReady = false;
var g_gapiIsReady = false;
$(function () {
log("#$(function())");
g_domIsReady = true;
start();
});
function gapiIsReady() {
log("#gapiIsReady");
g_gapiIsReady = true;
start();
}
function start() {
// Make sure both the gapi.client and the DOM (per jquery) are ready.
if (!(g_gapiIsReady && g_domIsReady)) return;
// Define members.
log("#start - gapi and DOM are ready");
var m_apiKey = "AIzaSyAvb0NHQMwyPbMJRtz2zRL4wTiVjZDiois"; // Points to Google account (including Google Drive) at paloalto#geodesy.net.
var m_clientId = "868768273487-q295tdfr54uvo98v74891qakcr9ci0pf.apps.googleusercontent.com";
var m_scopes = "https://www.googleapis.com/auth/plus.me";
// Wire buttons.
var queryButton = document.getElementById('query-button');
queryButton.onclick = function () { runGetRequest(); return false; };
var startOAuthButton = document.getElementById('startOAuth-button');
startOAuthButton.onclick = function () { startOAuth(); return false; };
// Set-up the gapi.
gapi.client.setApiKey(m_apiKey);
//----------------------------------------------------------------------------
// gapi.client.request query functions.
//----------------------------------------------------------------------------
function runGetRequest() {
log("#runGetRequest");
var tableId = "1VZgvKyuh9uHXkQawpxg1MU8AlO8Mngl-sx7SP74"; // TR_TREE_E
var sql = "select count(GID) from " + tableId + " where GID > 50000";
var path = "/fusiontables/v1/query";
var restRequest = gapi.client.request({
path: path,
params: { 'sql': sql }
});
restRequest.execute(jsonCallback);
}
function jsonCallback(json) {
log("#jsonCallback");
var output = JSON.stringify(json);
log(output);
alert(output);
}
//----------------------------------------------------------------------------
// OAuth functions.
//----------------------------------------------------------------------------
function startOAuth() {
log("#startOAuth");
var authorizeButton = document.getElementById('authorize-button');
window.setTimeout(checkAuth, 1); // check auth in 1 ms
function checkAuth() {
log("#checkAuth");
gapi.auth.authorize({
client_id: m_clientId,
scope: m_scopes,
immediate: true
}, handleAuthResult);
}
function handleAuthResult(authResult) {
log("#handleAuthResult");
if (authResult && !authResult.error) {
log("#handleAuthResult - authResult=true");
log(authResult); // authResult is a token (with 3600 second expiration).
authorizeButton.disabled = true;
useAuthResults();
} else {
log("#handleAuthResult - authResult=false");
authorizeButton.disabled = false;
authorizeButton.onclick = handleAuthClick;
}
}
function handleAuthClick() {
log("#handleAuthClick");
gapi.auth.authorize({
client_id: m_clientId,
scope: m_scopes,
immediate: false
}, handleAuthResult);
return false;
}
function useAuthResults() {
log("#useAuthResults");
// Get the Google+ user's ID and name (member info).
gapi.client.load('plus', 'v1', function () {
log("#gapi.client.load callback");
var request = gapi.client.plus.people.get({ 'userId': 'me' });
request.execute(function (aInfo) {
log("#request.execute callback");
if (aInfo.code !== undefined) {
alert('Google+ API returned ' + aInfo.code + ': ' + aInfo.message);
} else {
// Here with successful sign-in. Display the user name.
log('Google+ user id, name: ' + aInfo.id + ', ' + aInfo.displayName);
authorizeButton.value = aInfo.displayName + " +" + aInfo.id;
}
});
});
}
}
}
function log(msg) {
if (console) console.log(msg);
}
</script>
<script src="https://apis.google.com/js/client.js?onload=gapiIsReady" type="text/javascript"></script>
</head>
<body>
<h1>Test3a</h1>
<p>This pages demonstrates a problem I am having using gapi.client.request with gapi.auth.</p>
<input type="button" id="query-button" value="Query"><br>
<input type="button" id="startOAuth-button" value="Start OAuth"><br>
<input type="button" id="authorize-button" value="Authorize"><br>
<p>Steps...</p>
<p>1. Click "Query" to run a gapi.client.request Google Fusion Table SQL-get query returning
a count of rows. This will run successfully until OAuth is used in steps 2 and 3.</p>
<p>2. Click "Start OAuth" to run an immediate:true authorization against Google+. If you
are currently signed into Google+, your user name will be displayed in the third button.</p>
<p>3. If your Google+ user name is not displayed in the third button, press it ("Authorize")
and sign into Google+.</p>
<p>4. Click the "Query" button again.
The query will run without error when pressed within about 30 seconds of OAuth authorization.
After that, the query fails with a 403 error. WHY?</p>
</body>
</html>
Please note that I intend to use the Google+ sign-in to track page usage specifics by user, not to enable the Fusion Tables queries.
I'm new to OAuth and gapi.client.request so this may be a simple misunderstanding on my part.
Thanks for any insights.
I don't have all the answers for you, but here I think are some that may help:
Before you have the user sign-in with G+, the gapi.client.request object is adding a "key=yourAPIKey" parameter to each request.
After you have the user sign-in with G+, the gapi.client.request object is adding a "key=yourAPIKey" parameter to each request and is sending an "Authorization: Bearer ya.xxxxxx" header with each request, representing an access token for the user that is logged in.
I think the reason you're seeing a 403 is because the access token is being sent to the server, but the token does not include a scope authorizating access to FusionTables data. When no access token is sent - this validation is not performed.
If you actually wanted to access data that the user owned, then you need to have the user consent to give your application access to their data by including an appropriate scope in your gapi.auth.authorize call (e.g. "https://www.googleapis.com/auth/fusiontables").
However since I don't think you are trying to access data on behalf of a specific user, what I think you really want to do is prevent the "Authorization" header being sent at all during your call to Fusion Table API.
I can't see an easy way to prevent the gapi.client.request library from sending that header when the user is logged in, so an alternate solution might be to instead create an HTTP object not using the gapi.client.request library (e.g. use XMLHttpRequest directly) - and manually include the "key=yourAPIKey" in each request.
(What I can't explain is why you're seeing 30 seconds of differing behavior...)