android - 使用 Google+ 的 Soundcloud API 移动 OAUTH 登录不适用于 Android

Question

我正在开发一个 Android 应用程序，该应用程序使用移动 SoundCloud 网页授权页面登录 SoundCloud。 SoundCloud 移动网络授权页面为您提供了三个登录选项，使用 SoundCloud、Facebook 或 Google+。界面如下所示:

到目前为止，我可以使用我的 SoundCloud 和我的 Facebook 凭据登录，但我在使用 Google+ 时失败了。这是我正在做的事情的简化版本:

public class SoundCloudActivity extends Activity {
    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.twitter_login_layout);
        ...

        loadingProgressBar = (ProgressBar) findViewById(R.id.loading_progressbar);
        WebView webView = (WebView) findViewById(R.id.login_webview);
        webView.setVerticalScrollBarEnabled(true);
        webView.setHorizontalScrollBarEnabled(true);
        webView.setWebViewClient(new SoundcloudWebViewClient());
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setAllowFileAccess(true);
        webView.getSettings().setPluginState(PluginState.ON);
        webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
        authUrl = Api.wrapper.authorizationCodeUrl(Endpoints.CONNECT, Token.SCOPE_NON_EXPIRING).toString();

        webView.loadUrl(authUrl);
    }


    private class SoundcloudWebViewClient extends WebViewClient {

        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            Log.d(TAG, "shouldOverrideUrlLoading(): url: "+url);
            if (url.startsWith(REDIRECT_URI.toString())) {
                Uri result = Uri.parse(url);
                new Thread(new Runnable() {
                    @Override
                    public void run() {
                        try {
                            token = Api.wrapper.authorizationCode(code, Token.SCOPE_NON_EXPIRING);
                        } catch (IOException e) {
                            e.printStackTrace();
                        }
                        ...
                    }
                }).start();
                return true;
            } else if (url.startsWith("authorize")) {
                return false;
            } else if (url.startsWith("http")) {
                view.loadUrl(url);
            }
            return true;
        }

        @Override
        public void onReceivedError(WebView view, int errorCode,
                String description, String failingUrl) {
            Log.d(TAG, "Call onError with error: "+description);
            super.onReceivedError(view, errorCode, description, failingUrl);
        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            Log.d(TAG,"onPageStarted(): url: "+url+" favicon: "+favicon);
            loadingProgressBar.setVisibility(ProgressBar.VISIBLE);
            super.onPageStarted(view, url, favicon);
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            loadingProgressBar.setVisibility(ProgressBar.GONE);
            super.onPageFinished(view, url);
        }
    }
}

选择使用Google+时，它将我重定向到熟悉的Google登录页面。然后当我输入我的用户名和密码时，它会将我重定向到一个空白页面并且什么都不做，包括不向我提供身份验证 token 。这是登录后生成的空白页面的示例 URL:

https://accounts.google.com/o/oauth2/auth?client_id=984739005367.apps.googleusercontent.com&redirect_uri=postmessage&response_type=code%20token%20id_token%20gsession&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fplus.login%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile&state=539399140%7C0.873620491&access_type=offline&request_visible_actions=http%3A%2F%2Fschemas.google.com%2FAddActivity%20http%3A%2F%2Fschemas.google.com%2FListenActivity%20http%3A%2F%2Fschemas.google.com%2FCreateActivity&after_redirect=keep_open&cookie_policy=single_host_origin&include_granted_scopes=true&proxy=oauth2relay763648117&origin=https%3A%2F%2Fsoundcloud.com&

我想知道 WebView 中是否缺少我的设置。我已经必须让其他人能够在 SoundCloud 移动网页中使用其他功能。任何建议将不胜感激。

Answer 1

因此 Google+ 使用跨站点 javascript 注入(inject)来完成身份验证过程，这要求在 Google 身份验证过程中 SoundCloud 登录窗口仍然打开。要处理此问题，您需要强制/允许 Google 身份验证进入新的 WebView 窗口。我在 github 上创建了一个展示整个过程的演示项目 here .

这是完成工作的类，查看整个注释以了解更多详细信息:

package com.bulwinkel.soundcloudlogin;

import android.content.Context;
import android.content.DialogInterface; 
import android.graphics.Bitmap;
import android.graphics.Color;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import android.os.Message;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.CookieManager;
import android.webkit.CookieSyncManager;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.FrameLayout;
import android.widget.ProgressBar;
import android.widget.RelativeLayout;

public class SoundCloudLoginActivity extends AppCompatActivity {

  private static final String TAG = SoundCloudLoginActivity.class.getSimpleName();

  //todo - create a project in the SoundCloud developer portal: https://soundcloud.com/you/apps/
  private static final String CALLBACK_SCHEME = "soundcloudlogindemo://authentication.complete"; //todo - replace
  private static final String CLIENT_ID = "e64276127b07b38ddfaf1ee458ffc2ac"; //todo - replace
  private static final String STATE = SoundCloudLoginActivity.class.getCanonicalName();

  @Override protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // clear the cookies to make sure the that the user is properly logged out
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP_MR1) {
      final CookieManager cookieManager = CookieManager.getInstance();
      cookieManager.removeAllCookies(null);
      cookieManager.flush();
    } else {
      CookieSyncManager.createInstance(getApplicationContext()).startSync();
      final CookieManager cookieManager = CookieManager.getInstance();
      cookieManager.removeAllCookie();
      cookieManager.removeSessionCookie();
    }

    // SoundCloud oauth url
    final Uri authUri = new Uri.Builder().scheme("https")
        .authority("soundcloud.com")
        .appendPath("connect")
        .appendQueryParameter("scope", "non-expiring")
        .appendQueryParameter("response_type", "code")
        .appendQueryParameter("state", STATE)
        .appendQueryParameter("display", "popup")
        .appendQueryParameter("client_id", CLIENT_ID)
        .appendQueryParameter("redirect_uri", CALLBACK_SCHEME)
        .build();

    Log.d(TAG, "https://soundcloud.com/connect?scope=non-expiring&response_type=code&state=boxset.SoundCloudLoginActivity&display=popup&client_id=6d483c5c02062da985379c36b5e7da95&redirect_uri=http%3A%2F%2Fwonder.fm%2Fincoming%2Fsoundcloud%2Fauth%2F");
    Log.d(TAG, authUri.toString());

    // we need a handle to this to add the second webview during google plus login
    final FrameLayout container = (FrameLayout) findViewById(R.id.container);

    // progress hud adds itself to the view hierarchy
    final LoadingHud loadingHud = new LoadingHud(container);

    final WebView webView = createWebView(this);
    webView.loadUrl(authUri.toString());

    final WebViewClient webViewClient = new WebViewClient() {

      // need to use the depricated method if you are supporting less than api 21
      @Override public boolean shouldOverrideUrlLoading(WebView view, String url) {

        //GUARD - been stung by this
        if (url == null) return false;

        //GUARD - check if we have got our callback url yet
        // this occurs when navigating to facebook and google plus login screens
        if (!url.contains(CALLBACK_SCHEME)) return false;

        final Uri uri = Uri.parse(url);

        //GUARD
        // the state query parameter is echoed back to us so we
        // know that the code is coming from a legitimate source
        final String state = uri.getQueryParameter("state");
        if (!STATE.equals(state)) return false;

        //GUARD
        final String code = uri.getQueryParameter("code");
        if (code == null) {
          // something went wrong during the auth process
          // you need to handle this
          Log.d(TAG, "No code returned from auth process");
          return false;
        }

        // you now have you code to use in the next step of the oauth process
        Log.i(TAG, "code = " + code);
        new AlertDialog.Builder(view.getContext())
            .setTitle("Auth Successful")
            .setMessage("Code: " + code)
            .setPositiveButton("OK", new DialogInterface.OnClickListener() {
              @Override public void onClick(DialogInterface dialogInterface, int i) {
                finish();
              }
            })
            .create()
            .show();

        return true;
      }

      @Override public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        loadingHud.show();
      }

      @Override public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        loadingHud.hide(true);
      }
    };
    webView.setWebViewClient(webViewClient);

    // require for google login
    // google login requires that the SoundCloud login window be open at the same time
    // as it uses cross window/site javascript injection to pass information back to
    // SoundCloud on completion
    webView.setWebChromeClient(new WebChromeClient() {
      @Override public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture,
          Message resultMsg) {

        // this WebView has to has the same settings as the original for
        // the cross site javascript injection to work
        final WebView googleSignInWebView = createWebView(view.getContext());
        googleSignInWebView.setWebChromeClient(this);
        googleSignInWebView.setWebViewClient(webViewClient);

        container.addView(googleSignInWebView);

        // this is the glue code that wires the original webview
        // and the new webview together so they can communicate
        final WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj;
        transport.setWebView(googleSignInWebView);
        resultMsg.sendToTarget();

        // this advises that we have actually created and displayed the new window
        return true;
      }

      // since we added the window we also have to handle removing it
      @Override public void onCloseWindow(WebView window) {
        container.removeView(window);
      }
    });

    container.addView(webView);

  }



  /**
   * @param context  the WebView must be given an activity context (instead of application context)
   *                 or it will crash in versions less than 4.4
   *
   * @return a {@link WebView} suitable for the soundcloud login process
   */
  private static WebView createWebView(Context context) {
    final WebView webView = new WebView(context);

    final WebSettings settings = webView.getSettings();

    // this allows the username and password validation to work
    settings.setJavaScriptEnabled(true);

    // these 2 are for login with google support
    // which needs to open a second window
    settings.setJavaScriptCanOpenWindowsAutomatically(true);
    settings.setSupportMultipleWindows(true);

    // prevent caching of user data
    settings.setSaveFormData(false);

    // prevents the webview asking the user if they want to save their password
    // needed for pre 18 devices
    settings.setSavePassword(false);

    return webView;
  }

  private static class LoadingHud {

    private final RelativeLayout container;

    public LoadingHud(ViewGroup parentView) {
      container = new RelativeLayout(parentView.getContext());
      container.setAlpha(0);
      parentView.addView(container);
      final ViewGroup.LayoutParams layoutParams = container.getLayoutParams();
      layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENT;
      layoutParams.width = ViewGroup.LayoutParams.MATCH_PARENT;
      container.setLayoutParams(layoutParams);

      addMask(container);
      addProgressBar(container);
    }

    private void addMask(RelativeLayout container) {
      final View view = new View(container.getContext());
      view.setBackgroundColor(Color.WHITE);
      view.setAlpha(.5f);
      container.addView(view);
      final RelativeLayout.LayoutParams layoutParams =
          (RelativeLayout.LayoutParams) view.getLayoutParams();
      layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENT;
      layoutParams.width = ViewGroup.LayoutParams.MATCH_PARENT;
      view.setLayoutParams(layoutParams);
    }

    private void addProgressBar(RelativeLayout container) {

      final ProgressBar progressBar = new ProgressBar(container.getContext());
      container.addView(progressBar);
      final RelativeLayout.LayoutParams layoutParams =
          (RelativeLayout.LayoutParams) progressBar.getLayoutParams();
      layoutParams.addRule(RelativeLayout.CENTER_IN_PARENT);
      progressBar.setLayoutParams(layoutParams);
    }

    void show() {
      container.bringToFront();
      container.animate().alpha(1f).start();
    }

    void hide(Boolean animated) {
      Float noAlpha = 0f;
      if (animated) {
        container.animate().alpha(noAlpha).start();
      } else {
        container.setAlpha(noAlpha);
      }
    }
  }
}