# Wijmo_Cloud.Oauth2

## Content

<div class="content__tsd">
						<div style="display:flex;justify-content:space-between;align-items:center">
							<h1>
								OAuth2 Class
							</h1>
						</div>
						<section class="tsd-comment">
							<div class="tsd-comment">
								<dl class="tsd-comment-tags">
									<dt>deprecated   </dt>
									<dd><p>since version 5.20231.*
										Please use Google's own authentication methods.</p>
										<p>Provides a simple way to use Google's GAPI OAuth functionality.</p>
										<p>To use, create an instance of the <a href="wijmo_cloud.oauth2.html">OAuth2</a> class and add a
											handler to the <a href="wijmo_cloud.oauth2.html#userchanged">userChanged</a> event to monitor the
											{@link @user} property, which is non-null if a user is currently
										signed in.</p>
										<p>Use the <a href="wijmo_cloud.oauth2.html#signin">signIn</a> and <a href="wijmo_cloud.oauth2.html#signout">signOut</a> methods to sign in or
										out of the Google account.</p>
										<p>For example, the code below creates an <a href="wijmo_cloud.oauth2.html">OAuth2</a> object
											and uses it to manage a button used to log users in and out
										of the application:</p>
										<pre><code class="language-typescript"><span class="hljs-keyword">import</span> { OAuth2 } <span class="hljs-keyword">from</span> <span class="hljs-string">'@mescius/wijmo.cloud'</span>;

<span class="hljs-comment">// create OAuth2 object</span>
<span class="hljs-keyword">const</span> API_KEY = <span class="hljs-string">'XXXX'</span>;
<span class="hljs-keyword">const</span> CLIENT_ID = <span class="hljs-string">'YYYY.apps.googleusercontent.com'</span>;
<span class="hljs-keyword">const</span> SCOPES = [ <span class="hljs-string">'https://www.googleapis.com/auth/userinfo.email'</span> ];
<span class="hljs-keyword">const</span> auth = <span class="hljs-keyword">new</span> OAuth2(API_KEY, CLIENT_ID, SCOPES);

<span class="hljs-comment">// click a button to log in/out</span>
<span class="hljs-keyword">let</span> oAuthBtn = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'auth_btn'</span>);
oAuthBtn.addEventListener(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
    <span class="hljs-keyword">if</span> (auth.user) {
        auth.signOut();
    } <span class="hljs-keyword">else</span> {
        auth.signIn();
    }
});

<span class="hljs-comment">// update button caption and accessToken when user changes</span>
auth.userChanged.addHandler(<span class="hljs-function"><span class="hljs-params">s</span> =&gt;</span> {
    <span class="hljs-keyword">let</span> user = s.user;
    oAuthBtn.textContent = user ? <span class="hljs-string">'Sign Out'</span> : <span class="hljs-string">'Sign In'</span>;
    gsNWind.accessToken = user ? s.accessToken : <span class="hljs-literal">null</span>;
    fsNWind.accessToken = user ? s.accessToken : <span class="hljs-literal">null</span>;
});</code></pre>
									</dd>
								</dl>
							</div>
						</section>
						<section class="tsd-hierarchy">
							<h3>Heirarchy</h3>
							<ul class="tsd-hierarchy">
								<li>
									<span class="target">OAuth2</span>
								</li>
							</ul>
						</section>
						<section class="tsd-index-group">
							<section class="tsd-index-panel">
								<div class="tsd-index-content">
									<section class="tsd-index-section ">
										<div class="title">
											<div class="gc_api_tree-item_icon_img_wrapper">
												<div class="gc_api_tree-item_icon_img" data-expand="true">
												</div>
											</div>
											<h3>
												Constructors
											</h3>
										</div>
										<ul class="tsd-index-list">
											<li class="tsd-kind-constructor tsd-parent-kind-class"><a href="wijmo_cloud.oauth2.html#constructor" class="tsd-kind-icon">constructor</a></li>
										</ul>
									</section>
									<section class="tsd-index-section ">
										<div class="title">
											<div class="gc_api_tree-item_icon_img_wrapper">
												<div class="gc_api_tree-item_icon_img" data-expand="true">
												</div>
											</div>
											<h3>
												Properties
											</h3>
										</div>
										<ul class="tsd-index-list">
											<li class="tsd-kind-property tsd-parent-kind-class"><a href="wijmo_cloud.oauth2.html#accesstoken" class="tsd-kind-icon">access<wbr>Token</a></li>
											<li class="tsd-kind-property tsd-parent-kind-class"><a href="wijmo_cloud.oauth2.html#idtoken" class="tsd-kind-icon">id<wbr>Token</a></li>
											<li class="tsd-kind-property tsd-parent-kind-class"><a href="wijmo_cloud.oauth2.html#user" class="tsd-kind-icon">user</a></li>
										</ul>
									</section>
									<section class="tsd-index-section ">
										<div class="title">
											<div class="gc_api_tree-item_icon_img_wrapper">
												<div class="gc_api_tree-item_icon_img" data-expand="true">
												</div>
											</div>
											<h3>
												Methods
											</h3>
										</div>
										<ul class="tsd-index-list">
											<li class="tsd-kind-method tsd-parent-kind-class"><a href="wijmo_cloud.oauth2.html#onerror" class="tsd-kind-icon">on<wbr>Error</a></li>
											<li class="tsd-kind-method tsd-parent-kind-class"><a href="wijmo_cloud.oauth2.html#onuserchanged" class="tsd-kind-icon">on<wbr>User<wbr>Changed</a></li>
											<li class="tsd-kind-method tsd-parent-kind-class"><a href="wijmo_cloud.oauth2.html#signin" class="tsd-kind-icon">sign<wbr>In</a></li>
											<li class="tsd-kind-method tsd-parent-kind-class"><a href="wijmo_cloud.oauth2.html#signout" class="tsd-kind-icon">sign<wbr>Out</a></li>
										</ul>
									</section>
									<section class="tsd-index-section ">
										<div class="title">
											<div class="gc_api_tree-item_icon_img_wrapper">
												<div class="gc_api_tree-item_icon_img" data-expand="true">
												</div>
											</div>
											<h3>
												Events
											</h3>
										</div>
										<ul class="tsd-index-list">
											<li class="tsd-kind-event tsd-parent-kind-class"><a href="wijmo_cloud.oauth2.html#error" class="tsd-kind-icon">error</a></li>
											<li class="tsd-kind-event tsd-parent-kind-class"><a href="wijmo_cloud.oauth2.html#userchanged" class="tsd-kind-icon">user<wbr>Changed</a></li>
										</ul>
									</section>
								</div>
							</section>
						</section>
						<section class="tsd-panel-group tsd-member-group ">
							<h2>Constructors</h2>
							<section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class">
								<a name="constructor" class="tsd-anchor"></a>
								<h3>constructor</h3>
								<ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class">
									<li class="tsd-signature tsd-kind-icon">new OAuth2<span class="tsd-signature-symbol">(</span>apiKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, clientId<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, scopes<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span>, options<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="wijmo_cloud.oauth2.html" class="tsd-signature-type">OAuth2</a></li>
								</ul>
								<ul class="tsd-descriptions">
									<li class="tsd-description">
										<aside class="tsd-sources">
										</aside>
										<div class="tsd-comment">
											<div class="lead">
												<p>Initializes a new instance of the <a href="wijmo_cloud.oauth2.html">OAuth2</a> class.</p>
											</div>
											<p>For details on the apiKey, clientID, and scope parameters,
												please refer to
											<a href="https://developers.google.com/identity/sign-in/web/sign-in">https://developers.google.com/identity/sign-in/web/sign-in</a>.</p>
											<p>To create or edit application credentials, please refer to
											<a href="https://console.developers.google.com/apis/credentials">https://console.developers.google.com/apis/credentials</a>.</p>
											<p>For a list of OAuth2 scopes for Google APIs, please refer to
											<a href="https://developers.google.com/identity/protocols/oauth2/scopes">https://developers.google.com/identity/protocols/oauth2/scopes</a></p>
										</div>
										<h4 class="tsd-parameters-title">Parameters</h4>
										<ul class="tsd-parameters">
											<li>
												<h5>apiKey: <span class="tsd-signature-type">string</span></h5>
												<div class="tsd-comment">
													<div class="lead">
														<p>An API key string created at Google's credentials page.</p>
													</div>
												</div>
											</li>
											<li>
												<h5>clientId: <span class="tsd-signature-type">string</span></h5>
												<div class="tsd-comment">
													<div class="lead">
														<p>A client ID string created at Google's credentials page.</p>
													</div>
												</div>
											</li>
											<li>
												<h5><span class="tsd-flag ts-flagOptional">Optional</span> scopes: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span></h5>
												<div class="tsd-comment">
													<div class="lead">
														<p>An array of strings representing OAuth2 scopes required by the application.</p>
													</div>
												</div>
											</li>
											<li>
												<h5><span class="tsd-flag ts-flagOptional">Optional</span> options: <span class="tsd-signature-type">any</span></h5>
												<div class="tsd-comment">
													<div class="lead">
														<p>JavaScript object containing initialization data for the object.</p>
													</div>
												</div>
											</li>
										</ul>
										<h4 class="tsd-returns-title">Returns <a href="wijmo_cloud.oauth2.html" class="tsd-signature-type">OAuth2</a></h4>
									</li>
								</ul>
							</section>
						</section>
						<section class="tsd-panel-group tsd-member-group ">
							<h2>Properties</h2>
							<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
								<a name="accesstoken" class="tsd-anchor"></a>
								<h3>accessToken</h3>
								<div class="tsd-signature tsd-kind-icon">access<wbr>Token<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
								<aside class="tsd-sources">
								</aside>
								<div class="tsd-comment">
									<div class="lead">
										<p>Gets an OAuth access token that can be used to perform authorized
										requests.</p>
									</div>
								</div>
							</section>
							<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
								<a name="idtoken" class="tsd-anchor"></a>
								<h3>idToken</h3>
								<div class="tsd-signature tsd-kind-icon">id<wbr>Token<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
								<aside class="tsd-sources">
								</aside>
								<div class="tsd-comment">
									<div class="lead">
										<p>Gets an OAuth id token that can be passed to the Firebase client
										libraries.</p>
									</div>
									<p>See <a href="https://firebase.google.com/docs/auth/web/google-signin">https://firebase.google.com/docs/auth/web/google-signin</a></p>
									<pre><code class="language-typescript"><span class="hljs-keyword">let</span> credential = firebase.auth.GoogleAuthProvider.credential(id_token);
firebase.auth().signInWithCredential(credential);</code></pre>
								</div>
							</section>
							<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
								<a name="user" class="tsd-anchor"></a>
								<h3>user</h3>
								<div class="tsd-signature tsd-kind-icon">user<span class="tsd-signature-symbol">:</span> <a href="../interfaces/wijmo_cloud.iuser.html" class="tsd-signature-type">IUser</a></div>
								<aside class="tsd-sources">
								</aside>
								<div class="tsd-comment">
									<div class="lead">
										<p>Gets an object with information about the current user
										(or null if the user is not signed-in).</p>
									</div>
								</div>
							</section>
						</section>
						<section class="tsd-panel-group tsd-member-group ">
							<h2>Methods</h2>
							<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
								<a name="onerror" class="tsd-anchor"></a>
								<h3>onError</h3>
								<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
									<li class="tsd-signature tsd-kind-icon">on<wbr>Error<span class="tsd-signature-symbol">(</span>e<span class="tsd-signature-symbol">: </span><a href="wijmo_cloud.oautherror.html" class="tsd-signature-type">OAuthError</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
								</ul>
								<ul class="tsd-descriptions">
									<li class="tsd-description">
										<aside class="tsd-sources">
										</aside>
										<div class="tsd-comment">
											<div class="lead">
												<p>Raises the <a href="wijmo_cloud.oauth2.html#error">error</a> event.</p>
											</div>
										</div>
										<h4 class="tsd-parameters-title">Parameters</h4>
										<ul class="tsd-parameters">
											<li>
												<h5>e: <a href="wijmo_cloud.oautherror.html" class="tsd-signature-type">OAuthError</a></h5>
											</li>
										</ul>
										<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
									</li>
								</ul>
							</section>
							<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
								<a name="onuserchanged" class="tsd-anchor"></a>
								<h3>onUserChanged</h3>
								<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
									<li class="tsd-signature tsd-kind-icon">on<wbr>User<wbr>Changed<span class="tsd-signature-symbol">(</span>e<span class="tsd-signature-symbol">?: </span><a href="wijmo.eventargs.html" class="tsd-signature-type">EventArgs</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
								</ul>
								<ul class="tsd-descriptions">
									<li class="tsd-description">
										<aside class="tsd-sources">
										</aside>
										<div class="tsd-comment">
											<div class="lead">
												<p>Raises the <a href="wijmo_cloud.oauth2.html#userchanged">userChanged</a> event.</p>
											</div>
										</div>
										<h4 class="tsd-parameters-title">Parameters</h4>
										<ul class="tsd-parameters">
											<li>
												<h5><span class="tsd-flag ts-flagOptional">Optional</span> e: <a href="wijmo.eventargs.html" class="tsd-signature-type">EventArgs</a></h5>
											</li>
										</ul>
										<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
									</li>
								</ul>
							</section>
							<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
								<a name="signin" class="tsd-anchor"></a>
								<h3>signIn</h3>
								<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
									<li class="tsd-signature tsd-kind-icon">sign<wbr>In<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
								</ul>
								<ul class="tsd-descriptions">
									<li class="tsd-description">
										<aside class="tsd-sources">
										</aside>
										<div class="tsd-comment">
											<div class="lead">
												<p>Signs a user in.</p>
											</div>
										</div>
										<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
									</li>
								</ul>
							</section>
							<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
								<a name="signout" class="tsd-anchor"></a>
								<h3>signOut</h3>
								<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
									<li class="tsd-signature tsd-kind-icon">sign<wbr>Out<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
								</ul>
								<ul class="tsd-descriptions">
									<li class="tsd-description">
										<aside class="tsd-sources">
										</aside>
										<div class="tsd-comment">
											<div class="lead">
												<p>Signs a user out.</p>
											</div>
										</div>
										<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
									</li>
								</ul>
							</section>
						</section>
						<section class="tsd-panel-group tsd-member-group ">
							<h2>Events</h2>
							<section class="tsd-panel tsd-member tsd-kind-event tsd-parent-kind-class">
								<a name="error" class="tsd-anchor"></a>
								<h3>error</h3>
								<div class="tsd-signature tsd-kind-icon">error<span class="tsd-signature-symbol">:</span> <a href="wijmo.event.html" class="tsd-signature-type">Event</a><span class="tsd-signature-symbol">&lt;</span><a href="wijmo_cloud.oauth2.html" class="tsd-signature-type">OAuth2</a><span class="tsd-signature-symbol">, </span><a href="wijmo_cloud.oautherror.html" class="tsd-signature-type">OAuthError</a><span class="tsd-signature-symbol">&gt;</span></div>
								<aside class="tsd-sources">
								</aside>
								<div class="tsd-comment">
									<div class="lead">
										<p>Occurs when an error happens.</p>
									</div>
								</div>
							</section>
							<section class="tsd-panel tsd-member tsd-kind-event tsd-parent-kind-class">
								<a name="userchanged" class="tsd-anchor"></a>
								<h3>userChanged</h3>
								<div class="tsd-signature tsd-kind-icon">user<wbr>Changed<span class="tsd-signature-symbol">:</span> <a href="wijmo.event.html" class="tsd-signature-type">Event</a><span class="tsd-signature-symbol">&lt;</span><a href="wijmo_cloud.oauth2.html" class="tsd-signature-type">OAuth2</a><span class="tsd-signature-symbol">, </span><a href="wijmo.eventargs.html" class="tsd-signature-type">EventArgs</a><span class="tsd-signature-symbol">&gt;</span></div>
								<aside class="tsd-sources">
								</aside>
								<div class="tsd-comment">
									<div class="lead">
										<p>Occurs when a user signs in or out.</p>
									</div>
								</div>
							</section>
						</section>
					</div>